I have a dropdown menu that is inside a box. I want the dropdown menu to fill up the entire box. The width fills up the entire box, but I cannot seem to find a way to change the height of the dropdown menu.

I have tried using height and messing with the padding but I can't find an answer anywhere.

<div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

I have a dropdown menu that is inside a box. I want the dropdown menu to fill up the entire box. The width fills up the entire box, but I cannot seem to find a way to change the height of the dropdown menu.

I have tried using height and messing with the padding but I can't find an answer anywhere.

<div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

• javascript
• html
• css

• Can you add the corresponding CSS. Without it, your containing box will auto size to the height of the contents. – Jennifer Goncalves Commented Mar 28, 2019 at 14:41
• Can you add the css too ? – Utsav Patel Commented Mar 28, 2019 at 14:41

6 Answers 6

I am modifying Deepshika's anwser

$("#select-height").focus(function () {
      this.size=10;
      $(this).css({"height":"200px", "position":"absolute"});
})
$("#select-height").blur(function () {
  this.size=1;
  $(this).css({"height":"40px", "position":"inherit"});
});

#select-height{
  height:40px;
  z-index:1;
  width:200px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>start</div>
<select id="select-height" 
onchange='this.size=1; this.blur();'>
    <option>1</option>
    <option>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>
    <option>20</option>
    <option>21</option>
  </select>
  <div>Last</div>

Live Demo

 <select style="position: absolute;" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="dropdown_list" name="list of majors" id="main_dropdown">

This works just fine for me you can adjust the position according to where you want it to appear. By stating position to be absolute it shows the list down, if you do not state it then it will show on top moving all your other codes.

Maybe it is what you need:

#main_dropdown_menu{
  height: 200px;
  background: grey;
}
#main_dropdown{
  height: 100%;
}

<div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

You can just set the height of select box in CSS:

select.dropdown_list {
  height: 30px;
}

<div class="custom_select" id="main_dropdown_menu">
    <select class="dropdown_list" name="list of majors" id="main_dropdown">
      <option value="default" selected="selected" id="submenu">---</option>
      <option value="arts">Arts</option>
      <option value="business">Business</option>
      <option value="engineering">Engineering</option>
      <option value="health">Health</option>
      <option value="humanities">Humanities</option>
      <option value="natural sciences">Natural Sciences</option>
      <option value="social sciences">Social Sciences</option>
    </select>
  </div>

This CSS will do the trick, adjust to your requirements.

select {
   height: calc(1.5em + .75rem + 2px);
   padding: .375rem 1.75rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Can't say about functionality, but for the aesthetic purpose just giving padding top and bottom with a fitting font size can bring the effect similar to increasing the height of 'select'

<select class="dropdown_list">

</select>

In CSS: give padding as required.

.dropdown_list{
   padding: 10px 0 10px 10px;
}