Select not displaying


Topic: Select not displaying

scottbenes pro asked 6 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 6 years ago

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


scottbenes pro commented 6 years ago

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


acebro pro commented 6 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 pro premium commented 6 years ago

Do you get any errors in the console?


Bartłomiej Malanowski staff pro premium answered 6 years ago

Please try to replace this code:

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

with this:

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

scottbenes pro commented 6 years ago

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


Bartłomiej Malanowski staff pro premium commented 6 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 6 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 pro premium commented 6 years ago

Can you show us your full code?


scottbenes pro commented 6 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
  • User: 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
Tags