[Bug] Missing padding for floating label

[No1e]

Version

Latest

Reproduction link

https://youdonotneedexample.com

Operating System

Windows 10

Device

Browser & Version

Chrome - any

Steps to reproduce

The reproduction is very simple. Just use example from your documentation

Vorname

Nachname

### What is expected? When the input field is focused, it is expected that the floating label be horizontally aligned with input field. ### What is actually happening? Floating label is not aligned with input field (missing padding)

---

Solution

Additional comments

[groovemen]

Hello @No1e,

Thank you for using our products and for letting us know about this issue. You have two use-cases for using the inputs label inside of a form:

• .bmd-label-static is recommended for using with a placeholder for an input

<div class="form-group bmd-form-group">
  <label class="bmd-label-static">Fist Name</label>
  <input type="text" class="form-control" placeholder="Your name here">
</div>

• .bmd-label-floating is recommended for using without the placeholder

<div class="form-group bmd-form-group">
  <label class="bmd-label-floating">Fist Name</label>
  <input type="text" class="form-control">
</div>

Hope that information helps you. Please let us know if we can help you with anything else.
Best,
Creative Tim Staff

P.S. Remember to wash your hands before coding!

[No1e]

Thank you for the reply, but I think you did not understood, what the problem is.
If the 'form-group' is wrapped in the 'row'

than the problem appears, as shown in the following figure

If its used without 'row'

Than its is shown correctly aligned with input field.

[groovemen]

Hello again,

Sorry for the misunderstanding. You have encountered this issue because you have set the col-2 class on the form-control div.
So if you are trying to use the form-control into a row, you have to also wrap the div into a col (like Boostrap default structure):

<div class="row">
  <div class="col-4">
    <div class="form-group bmd-form-group">
      <label class="bmd-label-floating">Fist Name</label>
      <input type="text" class="form-control">
    </div>
  </div>
</div>

NOT like this:

<div class="row">
  <div class="form-group bmd-form-group col-4">
    <label class="bmd-label-floating">Fist Name</label>
    <input type="text" class="form-control">
  </div>
</div>

Please let us know if we can help with any other details.

Best,
Creative Tim Staff

P.S. Remember to wash your hands before coding!