Topic: Integrating MDBootstrap with existing no select elements are shown

kayes.islam.ocean pro asked 4 years ago


We are integrating MDBootstrap to our existing site. Although we are using the angular version of MDBootstra, our first goal is to just integrate the MDBootstrap's css to get the theme we want for our app.

Once we add the css files from MDBootstrap, none of the select elemets are displayed. *Expected behavior*Select elements should be displayed as they do in bootstrap*Actual behavior*None of the select elements are displayed. Display:none set to all.

How can we get all the selects working, why are they hidden in the first place?


kayes.islam.ocean pro answered 4 years ago


As I said, we are integrating the style with our existing app. We have hundreds of selects throughout our code which are just vanilla html selects, eg:

<select ng-model="detailsSearch.Status" ng-options="s.Text for s in availableStatuses" tabindex="4">

If you are suggesting that I need to add those classes "browser-default" and "custom-select", that is not an easy to do solution.

I think plain old html select's should work without having to use any extra classes, just like it does for bootstrap.

Is it possible to do this?


Arkadiusz Idzikowski staff commented 4 years ago

We will take a closer look at this and check if the display: none style is still necessary in current version.


Damian Gemza staff answered 4 years ago


Dear @kayes.islam.ocean

Could you please show me the code which you are using?

This code is from our docs, and it is working fine. Please compare it with the Bootstrap's Select code and check, if there are some differences.

<select class="browser-default custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No