1

When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".

<div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample5">
    <label class="mdl-textfield__label" for="sample5">Text lines...</label>
  </div>
aniket7824
  • 129
  • 2
  • 11

1 Answers1

7

I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:

  1. Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
  2. Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.

This will force the label to float above the input, instead of acting as a placeholder.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
  <input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
  <label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
Dom
  • 3,173
  • 4
  • 30
  • 39