CODEWITHSUNDEEP
materialize
Robin Dijkhof
Robin Dijkhof

Reputation: 19288

How to align label with select in MaterializeCSS?

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?

Upvotes: 3

Views: 3563

Answers (1)

phegstrom
phegstrom

Reputation: 46

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.

Upvotes: 3

Related Questions