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

  1. 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). placeholder_overlapping

  2. IMHO, even though it is not part of the range slider components of Google Material Design, Materialize should provide a double range slider.

    double_range_slider_component

  3. 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

    wrong

    Workaround

    placeholder=""
    

    Result

    right

  4. Long error messages will span over several lines and break the design.

    Default

    wrong

    Workaround

    provided by @marci2020

    label[data-error]:after {
      white-space: nowrap;
    }
    

    Result

    right

  5. IMHO, when several inputs are stacked, inputs below are too close to the error message.

    Default:

    wrong

    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

    right`

  6. Error messages (from data-error) are not displayed on inputs with the datepicker class.

    datepicker_error

  7. 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)

Most upvoted comments

@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.

.input-field label {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    -moz-transform: translateY(-140%);
    -ms-transform: translateY(-140%);
    -o-transform: translateY(-140%);
    transform: translateY(-140%);
}