Material Select not working


Topic: Material Select not working

.jonathan. pro asked 2 months ago

Hello,

I'm trying to include the Material Select and is not working. Yes I have pro. And Yes I initialized it.

Here is an example:

    <select class="mdb-select md-form">
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

// Material Select Initialization
$(document).ready(function() {$('.mdb-select').materialSelect();});

Is this a bug? Can anyone help me with this? Thanks.


Bartłomiej Malanowski staff pro premium commented 2 months ago

What's the problem?


john.epperson pro premium commented 2 months ago

I have this problem as well. I am using pro and have built it through Webpack. Most things that I've tried using so far are working as best I can tell, but selects are not.

If I try and manually call the above JS, e.g. $('.mdb-select').materialSelect(); (I even tried $('.mdb-select').material_select(); for kicks cuz I'd seen it mentioned in a couple places I google searched), I get an error with the following signature: Uncaught TypeError: $(...).material_select is not a function at <anonymous>:1:18

I get the same error signature when calling it via a $(document).ready callback.

I've tried manually importing the material-select.js module with no luck still.


Michelle Murray pro commented 2 months ago

I am having this same problem on all my website selects where I'm using the class="mdb-select md-form". When I replace the class to use the default select with the class="browser-default custom-select" then the select works. However, I much prefer using the Material Select so wondering how much longer before this bug is fixed. Thanks


Krzysztof Wilk staff answered 2 months ago

Hi!

Are you sure that you put initialization code into tags before ending of tags, after all scripts? If not, can you make a snippet with your problem? Because everything works for me. I want to see what's happening with my own eyes, It'll be helpful


grizotto pro premium answered 3 weeks ago

It has problem inside a container-fluid:

https://mdbootstrap.com/snippets/jquery/grizotto/995590


Mikołaj Smoleński staff commented 3 weeks ago

Hi there, the issue was solved in the latest MDB version (4.8.7).


Please insert min. 20 characters.