[Bug] value of text input overlap with its label

[liemteksun]

Version

3.0.1

Reproduction link

https://osplit.com/s/material-dashboard-pro-html-v3.0.1/pages/ecommerce/products/new-product2.html

Operating System

Linux

Device

Linux

Browser & Version

Chrome 94

Steps to reproduce

1. the user populates the text input field (at this point, the label correctly move up)
2. the user comes back to the page result: the label overlap with user's input see the screen shot here https://osplit.com/s/material-dashboard-pro-html-v3.0.1/overlap.png (Ignore the 2nd highlighted drop down issue)

Once the user clicks the input, the user can see clearly the label & his input

This issue shows up on Chrome and Firefox

What is expected?

The user input & its label don't overlap

What is actually happening?

The user input & its label overlap each other

---

Solution

Additional comments

[groovemen]

Hello @liemteksun,

Thank you for using our products, if you want to set a value for a input you will need to use the static input by changing the input-group-dynamic class into this: input-group-static. Please check our product documentation for more information: https://www.creative-tim.com/learning-lab/bootstrap/forms/material-dashboard#form-styles

All the best, Stefan

[groovemen]

Hello @liemteksun,

Thank you for using our products, one quick solution until the next product update is to set the is-filled class for the .input-group-dynamic. This will look like this:

<div class="input-group input-group-dynamic is-filled">
  <label for="exampleFormControlInput1" class="form-label">Name</label>
  <input class="multisteps-form__input form-control" type="text" value="initial value" onfocus="focused(this)" onfocusout="defocused(this)">
</div>

Hope this information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

[liemteksun]

This works - meaning even when there is no input, the label is moved up Not exactly the effect that I'm looking for, but looks acceptable and easy to replace once you released the next product update

thanks!

Looking forward for the next update