[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-controldiv. 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!