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

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

   

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

   

   Workaround

   placeholder=""
   

   Result

   

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

   

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

   `

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

   

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 !

[Clemzd]

@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%);
}

[jtlthe2]

I put the following workaround in my CSS to wrap the text when I specified and when it needed to in my Angular 2 app.

label[data-error], label[data-success] {
    width: 100%;
    white-space: pre-wrap;
}

It allowed me to fill my data-error property with the following

[attr.data-error]="'Line 1 of the message.\nLine 2 of the message. I am going to make this really really really really really really really really really really really really really really really really really really really really really really really long, so it wraps.\nLine 3 of the message.\n'"

which then displayed the error how I wanted (image attached).