search

Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.86k stars 4.74k forks source link

Material Select "offsets" text when leading or trailing whitespace is present #3249

Open limelights opened 8 years ago

limelights commented 8 years ago

When creating a Select element with the following markup

<select name="language">
    <option value="EN">
                  English
    </option>
    <option value="EN">
                  Romulan
    </option>   
</select>

the JavaScript will interpret the HTML including the whitespace leading the text "English" and "Romulan" and append it to the generated span element. This causes the selected option text to be offset by X amount of whitespace producing the Codepen below

The offending JavaScript file seems to be: https://github.com/Dogfalo/materialize/blob/f7390445388813882d3b6948b0f034dec3eb700a/js/forms.js

And offending lines: L416, L418, L425, L427

The fix "could" be a simple .trim() on the HTML to rid the leading and trailing whitespace.

Codepen for not working scenario: http://codepen.io/webhenrik/pen/mEPOwx Codepen for working scenario: http://codepen.io/webhenrik/pen/jrqVwo

TheRPunkt commented 8 years ago

Same problem here... Is an official fix coming?

dargmuesli commented 6 years ago

I fixed this once for me by simply adding .trim(): https://github.com/Dargmuesli/materialize/commit/b1a32c91b14ef388397e0b4fbac1e314832ee816#diff-338f03716a63d52eee0f79b4510d617c I guess for v1 it needs to be added (at least) here: https://github.com/Dogfalo/materialize/blob/4a68ebd12c85b81e188988760ec6f16899864da3/js/select.js#L365 I'll have a look at it tomorrow :)

Smankusors commented 3 years ago

Fixed on https://github.com/materializecss/materialize/pull/100