Materialize: Bug with responsive grid and select

[ghost]

Hi all =)

Using v0.97.6. See code and picture : when resizing, bug appair between col lX and col mX.
EDIT : Can be tested here

When deleting select, bug disappear. I can use everything else instead of select. But select make this bug appear.

Screenshots tell it better :

            <div class="row">
                <div class="col s12">
                    <h3>Recherche :</h3>
                </div>
                <div class="col s12 m4 l2 input-field">
                    <input type="text" id="pr_ref">
                    <label for="pr_ref">Référence</label>
                </div>
                <div class="col s12 m8 l4 input-field">
                    <input type="text" id="pr_cat">
                    <label for="pr_cat">Categorie</label>
                </div>
                <div class="col s12 m12 l4 input-field">
                    <select id="impot">
                        <option value="all">Tous</option>
                        <option value="1">Oui</option>
                        <option value="0">Non</option>
                    </select>
                    <label for="impot">Elligible au crédit d'impôts</label>
                </div>
                <div class="col s12 m4 l2 input-field">
                    <input type="text" id="price">
                    <label for="price">Prix</label>
                </div>
                <div class="col s12 m4 l2 input-field">
                    <input type="number" min="0" id="warranty">
                    <label for="warranty">Garantie</label>
                </div>
                <div class="col s12 m4 l7 input-field">
                    <input type="text" id="name">
                    <label for="name">Nom interne</label>
                </div>
                <div class="col s12 m12 l3 center-align">
                    <button class="btn waves-effect waves-light" type="submit" name="action">
                        Recherche
                        <i class="material-icons right">search</i>
                    </button>
                </div>
            </div>

[acburst]

Im not sure you understand how our columns work. If you stuff all these cols inside of a single row then this will happen. What exactly is the layout you want?

And I don't think you ever described exactly what the bug is.

[ghost]

Not exactly : When resizing, I should obtain (from top to bottom) :
On large : 4-3 (1st picture - OK)
On medium : 2-1-3 (3rd picture - OK)
On small : We don't care (s12 for all so 1-1-1-1-1-...)

But, between large and medium, I'm getting this weird grid (2' picture) When resizing.

Plus, the _Garantie_ field is getting stuck on the right side (match with the _Elligible au crédit d'impôts_'s field position), it shouldn't.
More, when I remove the _Elligible au crédit d'impôts_'s select (not the .col element), problem disappear.

[ghost]

OH SH*T just found it !

.select-wrapper input.select-dropdown {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 15px 0;
    padding: 0;
    display: block;
}

last line display:block; is the one who causing this !
It have to be inline-block
-> i'm correcting and pull request

[ghost]

@acburst Still think the same ;) ?

[acburst]

I'm sorry, but I still can't reproduce this locally even with your jsfiddle. Feel free to reopen if you can reproduce this on the latest version.