Floating Label with pre-filled values


Hi, i wonder if you could help me out.
Iam using floating-label in my forms, but when i have pre-filled values in a form, the label is not floating on top, instead it displays in the middle of the input control (just like, when having an empty input). Is there any way to make it floating with autofilled values ?

Thank you (for your answer and for this beautiful design),



You can find an example for this on the Advanced UI Forms section.

<div class="form-group form-group-label control-highlight">
  <div class="row">
    <div class="col-lg-6 col-sm-8">
      <label class="floating-label" for="float-text-value">Input Field with Value</label>
      <input class="form-control" id="float-text-value" type="text" value="something has already been written down">

Hope that helps!