materialize: A few bugs with version v0.97.0
Hi,
Probably the most amazing css/js framework I have seen so far, so I thought you would appreciate some feedback about several issues I have found.
Setup
Materialize v0.97.0 Safari 8.0.6
Issues
-
When a date picker is applied to an input field inside a
<div class="input-field"></div>
, the placeholder should move up (respectively down) when the picker opens (respectively closes). -
IMHO, even though it is not part of the range slider components of Google Material Design, Materialize should provide a double range slider.
-
Input error is misplaced when input has no value, most likely because of the placeholder . It only displays correctly when the placeholder slides up.
Default
Workaround
placeholder=""
Result
-
Long error messages will span over several lines and break the design.
Default
Workaround
provided by @marci2020
label[data-error]:after { white-space: nowrap; }
Result
-
IMHO, when several inputs are stacked, inputs below are too close to the error message.
Default:
Workaround
provided by @marci2020
Adding “col” class to every element with “input-field” class and putting it into an element with class “row” (like done on Materialize form examples).
<div class="row"> <div class="input-field col s12"> <input disabled value="I am not editable" id="disabled" type="text" class="validate"> <label for="disabled">Disabled</label> </div> </div>
Result
`
-
Error messages (from
data-error
) are not displayed on inputs with thedatepicker
class. -
Close a date picker, switch browser tab, come back to the previous tab and the picker reopens. Bug has been reported on Safari (8.0.6) and Chrome (43.0.2357.134).
Looking forward to reading you.
Cheers, and keep the amazing work !
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 6
- Comments: 34 (3 by maintainers)
@gempain I was saying this hack is better than alterate the HTML code. I think that placeholder=“” is not a good practise.
And oh my bad, this solution does not work anyway This one works instead.