Material Select not working

web
mobile

Topic: Material Select not working

.jonathan. pro asked 7 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 7 months ago

What's the problem?


john.epperson pro premium commented 7 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 7 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


Bjenk Ellefsen pro premium commented 3 months ago

I am having the same problem. What was the solution, if any?


Bartłomiej Malanowski staff pro premium commented 3 months ago

@Bjenk Ellefsen do you use the latest version of MDB (4.8.11)? If so, please read our changelog where we wrote: .material_select() support has been dropped. The new syntax is the only one supported: .materialSelect()


Bjenk Ellefsen pro premium commented 3 months ago

@Bartłomiej Malanowski

Yes, I am using 4.8.11 and I am using the materialSelect() call. I am having the same problem as here. The select input doesn't show and I get an error message that materialSelect is undefined. I am using Flask and template extension.


Bartłomiej Malanowski staff pro premium commented 3 months ago

Can you share your project with me? Or can you try to recreate the issue on our snippets? https://mdbootstrap.com/snippets


Krzysztof Wilk staff answered 6 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 6 months ago

It has problem inside a container-fluid:

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


Mikołaj Smoleński staff commented 6 months ago

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


Please insert min. 20 characters.