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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants