I have a very simple ui-select component in my application like in the following examples : http://angular-ui.github.io/ui-select/demo-basic.html
After migrating from Bootstrap 3 to Bootstrap 4. The component is still here but the results are not displayed.
What I've tried so far :
dropdown-item class into the results but it didn't workTurns out in BS4, the menu is displayed only when the show class is present along with the dropdown-menu class and not displayed otherwise :
.dropdown-menu.show {
display: block;
}
To fix my issue I had to take this part from BS3 and copy it into my own app style :
.open > .dropdown-menu {
display: block;
}
I'm well aware that this is not the proper way to do it but it will do the trick until angular-ui receive a BS4 ready update.
I had the same issue and adding following css classes to Style.css resolved it.
/**
* ui-select.bootstrap4.shim.css
*
* Adapt `bootstrap` (v3) theme from AngularJS `ui-select`
* component to Bootstrap v4.x look and feel.
* Bootstrap v4.x look and feel
*
* Feel free to test and open issues and pull requests.
*
* @see https://angular-ui.github.io/ui-select/
*
* @project ui-select.bootstrap4.shim.css
* @version 1-20180706
* @author Francis Vagner dos Anjos Fontoura
* @copyright 2018 by the author
* @cssdoc version 1.0-pre
* @license MIT
*/
.pull-left {
float: left !important;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
margin-left: 0;
vertical-align: middle;
width: 0;
}
.pull-right {
float: right !important;
}
.ui-select-toggle.btn {
border: 1px solid #ced4da;
}
.ui-select-choices.dropdown-menu {
display: block;
}
.ui-select-match-text {
max-height: 24px;
}
.ui-select-match.btn-default-focus {
border-radius: .25rem;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
outline: 0;
}
.ui-select-match.btn-default-focus > .ui-select-toggle {
border-color: #80bdff;
}I had the same problem and after seeing that ui-select needs a lot of work to be fixed for bootstrap 4, I wrote a small directive to replace it.
The goal was also to keep it simple and looking native in bootstrap 4.
It's available on npm.
