Results 1 to 4 of 4

Thread: CSS issue with dropdowns

  1. #1
    Junior Member
    Join Date
    Feb 2016
    Posts
    4

    CSS issue with dropdowns

    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:

    HTML Code:
        <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>
    Last edited by jrichview; 02-02-2016 at 05:47 PM.

  2. #2
    Junior Member
    Join Date
    Feb 2016
    Posts
    4
    Can't tell if the image attach is working. Here's an even better example

    dropdown2.jpg

  3. #3
    Junior Member
    Join Date
    Feb 2016
    Posts
    4
    So, is this the wrong forum to ask a question like this?

  4. #4
    Junior Member
    Join Date
    Feb 2016
    Posts
    4
    Correction: this happens in all cases with our Bootstrap forms, not just on small devices.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •