CSS issue with dropdowns

[jrichview]

I inherited a web app that someone else did with Bootstrap, so I am new to this (apologies in advance). Using Chrome's device mode features to test.

On phone-sized devices dropdowns are not rendering well, and aren't very usable. All CSS is bootstrap, none of it is ours. Example:


Dropdown.jpg
Full dropdown doesn't render, there's no way to scroll. Even if you use arrow keys after you drop down, the value will change but the list never scrolls. Looks like crap.

The page's Html looks like this snippet:

    <div class="col-sm-6">

        <div class="form-group">
                <!-- another control here -->
        </div>

        <div class="form-group">
            <label for="StartHour">Start Time</label>
            <select class="form-control" data-max="18" data-min="9" data-val="true" data-val-number="The field Start Time must be a number." data-val-required="The Start Time field is required." id="StartHour" name="StartHour">
                <option value=""></option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
            <span class="field-validation-valid" data-valmsg-for="StartHour" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
            <!-- etc -->
        </div>
    </div>

[jrichview]

Can't tell if the image attach is working. Here's an even better example

dropdown2.jpg

[jrichview]

So, is this the wrong forum to ask a question like this?

[jrichview]

Correction: this happens in all cases with our Bootstrap forms, not just on small devices.