Floating label text field not rendered correctly when rendered with a value

[bazzel]

Hi,

As described on http://daemonite.github.io/material/docs/4.1/material/text-fields/#floating-label-text-fields I can move a label above the text field.

However, this doesn't seem to work when a prefilled input field is rendered. I know can work around this by adding the 'has-value' class to container tag, but I'm not sure if this is by design or a bug.

So this doesn't move the label correctly when the input does not have the focus:

<div class="form-group">
  <div class="floating-label">
    <label for="exampleFloatingLabel1">Floating label</label>
    <input aria-describedby="exampleFloatingLabel1Help" class="form-control" id="exampleFloatingLabel1" placeholder="Optional placeholder" type="text" value="My Value">
  </div>
</div>

But this does:

<div class="form-group">
  <div class="floating-label has-value">
    <label for="exampleFloatingLabel1">Floating label</label>
    <input aria-describedby="exampleFloatingLabel1Help" class="form-control" id="exampleFloatingLabel1" placeholder="Optional placeholder" type="text" value="My Value">
  </div>
</div>

[djibe]

Hi, 2 simple questions, did you add : $('.floating-label .custom-select, .floating-label .form-control').floatinglabel(); to your JS ? Do you call .floatinglabel() after each input manipulation ?

[bazzel]

No I didn't. I'm afraid I've been a little too naive expecting this to be in place 'automatically'. I'll have a look and let you know the outcome (might take a few weeks though).

Thanks for your quick reply.

[djibe]

It's no big deal. Just you didn't read as far as http://daemonite.github.io/material/docs/4.1/material/text-fields/#usage

I nearly finished the update for this theme : https://www.diabeclic.com/daemonite/materialWIP.css

[bazzel]

Works like a charm. Thanks again.

[cubed-it]

i find this extremely error prone. even a text field which is always initial without state is destroyed by a backward navigation. what is the reason that this does not happen automatically? :/

[sesemaya]

Hi @cubed-it

A component such as a dropdown menu is only triggered when a user actually interacts with it. This is different to floating label, all floating labels will be initialised at the same time if it "happens automatically" and this will be a performance hit if there are a considerable amount of floating labels on the page. Therefore, floating labels are opt-in. Additionally, making floating labels happen automatically on DOM ready will not cover the floating labels added dynamically, they still have to be manually activated.

Having said that, we are looking at getting rid of JavaScript dependecy for floating label componenet using :placeholder-shown. We may add an additional CSS only solution based on :placeholder-shown while keeping the current JavaScript solution. If your users' browsers do support this feature, you can go for the CSS only solution.

[cubed-it]

@sesemaya thanks for the detailed explanation. less js sounds basically desirable to me ;)