2

My problem is when i select the year and day on the selectbox birthday form the dropdown is to long. I want the drop down to be short but have a scroll bar on it.

html:

<div class="col-sm-offset-1 col-sm-12">
    <div class="form-group input-group">
        <div class="btn-group input-group">
            <span class="input-group-addon">Birthday</span>
                <select name="month" class="btn btn-default" id="bmonth" data-container="body" data-placement="left" data-toggle="popover" data-content="Select your Birthday!" >                                      
                    <option>Month</option>                   
                </select>
                <select name="day" class="btn btn-default" id="bday" data-container="body" data-placement="top" data-toggle="popover" data-content="Select your Birthday!" >
                    <option>Day</option>                                
               </select>
              <select name="year" class="btn btn-default" id="byear" data-container="body" data-placement="right" data-toggle="popover" data-content="Select your Birthday!" >
                <option>Year</option>
              </select>
        </div>
        <br />
    </div>
</div>

script:

$(document).ready(function () {
            var month = [], day = [], year = [];

            for (var i = 1; i <= 12; i++) {
                month.push(i);
            }
            for (var i = 1; i <= 31; i++) {
                day.push(i);
            }
            for (var i = 1900; i <= (new Date().getFullYear()); i++) {
                year.push(i);
            }
            $.each(day, function (index, d) {
                $("#bday").append("<option value = '"+d+"'>"+d+"</option>");
            });
            $.each(month, function (index, m) {
                $("#bmonth").append("<option value = '"+m+"'>"+m+"</option>");
            });
            $.each(year, function (index, y) {
                $("#byear").append("<option value = '"+y+"'>"+y+"</option>");
            });
});

current output:

enter image description here

Howli
  • 12,291
  • 19
  • 47
  • 72
user3671584
  • 339
  • 2
  • 4
  • 15

1 Answers1

2

the size limit is controlled by the browser and not something you can alter.

As answered here:

Height of an HTML select box (dropdown)

and here:

Limiting the displayed height of a select drop-down

Community
  • 1
  • 1
Riskbreaker
  • 4,621
  • 1
  • 23
  • 31
  • 1
    I was writing an answer exactly like yours. With the very same links. Let me just add then that the only solution is to build (or find) a custom dropdown. – LcSalazar May 28 '14 at 21:13