search

angular-ui / ui-select

AngularJS-native version of Select2 and Selectize
MIT License
3.26k stars 1.81k forks source link

ui-select-choices conflicts with bootstrap4 #2145

Open bakrowork opened 6 years ago

bakrowork commented 6 years ago

The issues forum is NOT for support requests. It is for bugs and feature requests only. Please read https://github.com/angular-ui/ui-select/blob/master/CONTRIBUTING.md and search existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description: ui-select-choices conflicts with bootstrap4

In BS4 the .dropdown-menu {... display : none; ....} makes the choices hidden. https://github.com/twbs/bootstrap/blob/14f712601edf87aa4e2e65243775682b1270124e/scss/_dropdown.scss#L20

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/y3Df15SgYj6nbXZWzKET?p=preview

Version of Angular, UI-Select, and Bootstrap/Select2/Selectize CSS

Angular: ^1.5.8

UI-Select: ^0.19.8

Bootstrap/Select2/Selectize CSS (if applicable): ^4.1.1

jfollas commented 6 years ago

I seemed to have worked around by adding the following style (after bootstrap css loads):

.ui-select-choices.ui-select-choices-content.ui-select-dropdown.dropdown-menu {
  display: block;
}
ma-zal commented 5 years ago

@jfollas Your workaround is perfectly working. Tested on Angular 1.7.2 Thanks.

esscardano commented 5 years ago

In our case worked setting the opacity, because was 0 for the dropdown:

.ui-select-choices.ui-select-choices-content.ui-select-dropdown.dropdown-menu {
  opacity: 100 !important;
}
evilaliv3 commented 5 years ago

Actually in @Globaleaks we encountered the same issue and this solution was not enough.

In fact this solution make it possible for the drop-down to appear but still not fixes the style of the input area.

This solution by @francisfontoura represents a better and complete fix: https://github.com/francisfontoura/angularjs.ui-select.bootstrap4.shim.css