CODEWITHSUNDEEP
angularjshtmltwitter-bootstrap-3html-selectng-options
Donal Rafferty
Donal Rafferty

Reputation: 19826

Bootstrap3 + Angular with Select causes the drop down to cut off

I am trying to use the HTML Select tag along with AngularJs using the ng-options directive to create a drop down options menu. On top of this I am using Bootstrap 3. I also have ui-bootstrap imported into the project.

Everything works functionally but I have an odd issue where when a user opens the Select dropdown for the first time after visiting the page then the last option in the drop down menu is cut off as in this image:

enter image description here

Once the user selects something and selects the drop down again then everything displays properly.

Here is the code I am using:

<!-- Select -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="selectThemePark">Theme Park</label>
            <div class="col-md-4">
                <select id="selectThemePark" name="selectThemePark" class="form-control"
                        ng-model="tip.theme_park_id"
                        ng-options="themepark.id as themepark.theme_park_name for themepark in all_themeparks | orderBy:'+theme_park_name'">
                </select>
            </div>
        </div>

I am not a web developer by trade so I'm not sure if there is something I am doing wrong with the HTML select tag or if there is a CSS quirk in Bootstrap 3 that I need to overwrite for the Select tag? Any pointers to what might be causing this behaviour?

Upvotes: 0

Views: 1073

Answers (1)

rlcrews
rlcrews

Reputation: 3562

I've had a time using bootstrap with angular around drop down menus. From what I have seen part of the issue is associated to the javascript interacting with the DOM once the page has rendered. Remember angular/js is applied after the DOM is rendered. The reason it is working after the click event is because the menu is refreshing and rebuilding the DOM to account for the injected items(options). This has been a huge issue for me with drop downs. One thing that I have done to correct this build my menus/navigation in an angular directive using angular transclude. This allows me to attach the menu at the time angular is initialized. You may want to give the transclude directive a look. There are a number of blogs and articles out there discussing this topic. Just search for bootstrap angular drop down transclude. There is also a SO question around drop downs not working in angular here. Hopefully this will help get you on the right track.

Upvotes: 1

Related Questions