Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align label with select in MaterializeCSS?

Tags:

materialize

I'm trying to create a multiple select with MaterializeCSS.
My html looks like this:

<div class="input-field">
    <select multiple>
        <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>
    <label>Brands</label>
</div>    

Activate the select: $('select').material_select();

Unfortunately the result looks like this:

Select

While to their examples look like this.

How come?

like image 473
Robin Dijkhof Avatar asked Jan 28 '26 01:01

Robin Dijkhof


1 Answers

I had a problem with this as well.

Make sure that your input-field is contained within a div with class row and also make sure your input-field has a col and size class:

<div class="row">
    <div class="input-field col s12">
    ...

If that doesn't work, make sure your other classes of the form or other divs match that of the examples on the materialize website.

like image 184
phegstrom Avatar answered Feb 01 '26 12:02

phegstrom