Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Select not displaying

scottbenes pro asked 5 years ago


I'm having trouble getting the select to display in my form.

<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>

I have added...

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

I see a display:none on the select element, but when I remove I can see the select, but it's not the material select. Any help would be appreciated.


acebro pro commented 5 years ago

Try this -> $('.mdb-select').materialSelect();


scottbenes pro commented 5 years ago

Thanks acebro. I tried that also, but it did not work either.


acebro pro commented 5 years ago

Check if 1. div with class "select-wrapper" 2. input with class "select-dropdown" 3. ul with class "dropdown-content" are created and visible.


Bartłomiej Malanowski staff commented 5 years ago

Do you get any errors in the console?



Please try to replace this code:

$('.mdb-select').material_select();

with this:

$('.mdb-select').materialSelect();

scottbenes pro commented 5 years ago

Thanks Bartłomiej, but that did not work either.


Bartłomiej Malanowski staff commented 5 years ago

I think you're facing this issue because the select that you want to "materialize" is in the iframe so this won't work because the iframe has its own context. When you put the select outside, it will work fine


scottbenes pro answered 5 years ago


acebro - "select-wrapper", "select-dropdown", and "dropdown-content" are not visible with developers tools.

Bartłomiej - I am not getting any errors in the console.

I feel like the js initialization is not working.


Bartłomiej Malanowski staff commented 5 years ago

Can you show us your full code?


scottbenes pro commented 5 years ago

https://gaslamp.dream.press/



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.6.1
  • Device: MacBook
  • Browser: Chrome
  • OS: Mojave
  • Provided sample code: No
  • Provided link: No