CODEWITHSUNDEEP
javascripthtmlcss
pannyandrew
pannyandrew

Reputation: 61

How can I resize the height of the <select> element in CSS or Javascript?

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>

Upvotes: 5

Views: 19614

Answers (6)

Bibek Bhattarai
Bibek Bhattarai

Reputation: 1

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;
}

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 178

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.com/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

Upvotes: 3

bstory
bstory

Reputation: 862

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;
}

Upvotes: 0

TVBZ
TVBZ

Reputation: 594

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>

Upvotes: 0

Deepshika
Deepshika

Reputation: 21

 <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.

Upvotes: 2

Pavlo Kovchuk
Pavlo Kovchuk

Reputation: 151

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>

Upvotes: 1

Related Questions