Jquery Select Menu height -


i trying example: http://jqueryui.com/selectmenu/

in jsfiddle: https://jsfiddle.net/3b1htdfr/5/

 $(function () {  $("#number")      .selectmenu()      .selectmenu("menuwidget")      .addclass("overflow");  }); 

but selectmenu double height shown on jqueryui example page. how change height of select menu? have tried height, padding, margin, font size. nothing seems change it.

thats because jquery selectmenu creates custom select made of divs , spans. original select id=number hidden.

you need add classes relevant parts of newly created menu;

  • the part click let menu drop down called "button"
  • the part drops down , has list items called "menu"

$(function() {    $("#number").selectmenu();    $("#number").data("ui-selectmenu").button.addclass("selectbutton")    $("#number").data("ui-selectmenu").menu.addclass("selectmenu");  });
.selectbutton {    width: 200px !important;    font-size: 12px !important;    color: red !important;  }  .selectmenu {    width: 200px !important;    font-size: 10px !important;    color: blue !important;  }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">    <script src="//code.jquery.com/jquery-1.10.2.js"></script>    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <span>      <select name="number" id="number">          <option>1</option>          <option selected="selected">2</option>          <option>3</option>          <option>4</option>          <option>5</option>          <option>6</option>          <option>7</option>          <option>8</option>          <option>9</option>          <option>10</option>          <option>11</option>          <option>12</option>          <option>13</option>          <option>14</option>          <option>15</option>          <option>16</option>          <option>17</option>          <option>18</option>          <option>19</option>      </select>  </span>


Comments

Popular posts from this blog

Email notification in google apps script -

c++ - Difference between pre and post decrement in recursive function argument -

javascript - IE11 incompatibility with jQuery's 'readonly'? -