Topic: Material Select not working

.jodadev. pro asked 4 years 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 commented 4 years ago

What's the problem?


john.epperson free commented 4 years 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 priority commented 4 years 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 free commented 4 years ago

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


Bartłomiej Malanowski staff commented 4 years 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 free commented 4 years 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 commented 4 years ago

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


grizotto free answered 4 years ago


It has problem inside a container-fluid:

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


Mikołaj Smoleński staff commented 4 years ago

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


Krzysztof Wilk staff answered 4 years 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



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 jQuery
  • MDB Version: 4.8.4
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No