Topic: How can I get a searchable select like bootstrap live search
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
gigm pro commented 7 years ago
So I solved this using the following less just add bootstrap-select css and js to your view and use the following style @color_1: #292b2c; @background_color_1: #ffffff; @border_color_1: #cccccc; .bootstrap-select.show { >.dropdown-menu { >.dropdown-menu { display: block; } } } .bootstrap-select { >.dropdown-menu { >.dropdown-menu { li.hidden { display: none; } li { a { display: block; width: 100%; padding: 3px 1.5rem; clear: both; font-weight: 400; color: @color_1; text-align: inherit; white-space: nowrap; background: 0 0; border: 0; } } } } >.btn { width: 100% !important; padding-right: 25px; padding-bottom: 0; } } .dropdown-toggle.btn-default { color: @color_1; background-color: @background_color_1; border-color: @border_color_1; } .dropdown-toggle { &::after { display: inline; width: 2px; height: 2px; margin-top: -5% !important; margin-left: 94%; vertical-align: -0.05em; content: ""; border-top: .7em solid; border-right: .4em solid transparent; border-left: .4em solid transparent; } } .bootstrap-select.btn-group { .btn { .filter-option { display: inline-block; overflow: hidden; width: 100%; padding-top: 2%; line-height: 1; box-sizing: border-box; text-align: left; } } } .light-blue-skin { .btn-default.dropdown-toggle { background-color: @background_color_1 !important; color: @color_1 !important; box-shadow: none; // border-bottom: 2px solid #292b2c; border-bottom: 1px solid #bdbdbd; padding: 0; &:focus { background-color: @background_color_1 !important; color: @color_1 !important; width: 100% !important; background-color: @background_color_1 !important; outline: none !important; } &:hover { background-color: @background_color_1 !important; color: @color_1 !important; width: 100% !important; background-color: @background_color_1 !important; outline: none !important; } } } .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100% !important; }