Search code examples
jqueryhtmlcsscordovamaterialize

materialize css get conflicted for select

I'm using cordova to develop app. In that I have used jquery mobile css and js and also I am using materialize css and js. Now I am facing problem after I included the materialize css and js file. I have used select to select the values. But the drop down is not displayed. But when I remove the materialize css file the drop down appears. How can I fix the problem without removing any of the file.

<select>
    <option> test </option>
    <option> test1 </option>
    <option> test2 </option>
</select>

I tried with just a normal select example.

Thanks in advance.

Solution

  • Materialize css file sets select{ display: none } because it uses its own jQuery plugin for <select> tags (see http://materializecss.com/forms.html).

    So, you either need to use the jQuery plugin provided by Materialize or override the

    select{ display: none } yourself.