CODEWITHSUNDEEP
htmlcsshtml-selectmaterialize
JAmes
JAmes

Reputation: 281

How to set size of Materialize select element?

Regarding the Materialize select element, I would expect the number of options visible to be 5, yet this is not the case. I have also tried to set the height but no luck either.

                                <div class="input-field col s4">
                                    <select id="add_cusine_type" size="5">
                                        <option value="" disabled selected>Choose your cuisine type</option>
                                        <option value="Australian">Australian</option>
                                        <option value="American">American</option>
                                        <option value="British">British</option>
                                        <option value="Carribean">Carribean</option>
                                        <option value="Chinese">Chinese</option>
                                        <option value="French">French</option>
                                        <option value="Greek">Greek</option>
                                        <option value="Indian">Indian</option>
                                        <option value="Italian">Italian</option>
                                        <option value="Japanese">Japanese</option>
                                        <option value="Mediterranean">Mediterranean</option>
                                        <option value="Mexican">Mexican</option>
                                        <option value="Moroccan">Moroccan</option>
                                        <option value="Spanish">Spanish</option>
                                        <option value="Thai">Thai</option>
                                        <option value="Turkish">Turkish</option>
                                        <option value="Vietnamese">Vietnamese</option>
                                    </select>
                                    <label>Cuisine Type</label>
                                </div>

enter image description here

Thank you

Upvotes: 0

Views: 2224

Answers (2)

Sean Doherty
Sean Doherty

Reputation: 2378

Materialize uses a dropdown for the select options (it is in fact a dropdown triggered by a text input). So you need to target the dropdown class:

.select-dropdown {
  height: 300px;
}

https://codepen.io/doughballs/pen/NWWGNMq

Upvotes: 2

Michael Nelles
Michael Nelles

Reputation: 6002

You can simply specify it in the wrapping div here my example is 300px

https://codepen.io/mxnelles/pen/GRJeXGd

<div class="input-field col s4" style="width:300px">
   <select id="add_cusine_type" size="5">
      <option value="" disabled selected>Choose your cuisine type</option>
      <option value="Australian">Australian</option>
      <option value="American">American</option>
      <option value="British">British</option>
      <option value="Carribean">Carribean</option>
      <option value="Chinese">Chinese</option>
      <option value="French">French</option>
      <option value="Greek">Greek</option>
      <option value="Indian">Indian</option>
      <option value="Italian">Italian</option>
      <option value="Japanese">Japanese</option>
      <option value="Mediterranean">Mediterranean</option>
      <option value="Mexican">Mexican</option>
      <option value="Moroccan">Moroccan</option>
      <option value="Spanish">Spanish</option>
      <option value="Thai">Thai</option>
      <option value="Turkish">Turkish</option>
      <option value="Vietnamese">Vietnamese</option>
   </select>
   <label>Cuisine Type</label>
</div>

Upvotes: 0

Related Questions