Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

ui-select-choices conflicts with bootstrap4 #2145

Open
bakrowork opened this issue Jul 3, 2018 · 4 comments
Open

ui-select-choices conflicts with bootstrap4 #2145

bakrowork opened this issue Jul 3, 2018 · 4 comments

Comments

@bakrowork
Copy link

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
Copy link

jfollas commented Nov 1, 2018

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
Copy link

ma-zal commented Feb 14, 2019

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

@esscardano
Copy link

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
Copy link

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

evilaliv3 added a commit to globaleaks/globaleaks-whistleblowing-software that referenced this issue Sep 5, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants