[Bug] Reopen issue 317 - 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

I really hope that there is a solution to the problem I'm having having my code to switch from input-group-dynamic to input-group-static depending on if it has a value or not It will make the code less readable

I know that this feature works in your past product (input text field with value causes the label to go up -- input field without value causes the label to go down to the input field) https://osplit.com/s/material-dashboard-pro-html-v2.1.2/examples/forms/regular2.html

What is expected?

input text field with value causes the label to go up input field without value causes the label to go down to the input field

What is actually happening?

I don't know

---

Solution

Additional comments

[rarestoma]

Hi @liemteksun,

Thank you for working with our products and sorry for our late response.

To fix this issue, go to material-dashboard.js file and on // Material Design Input function section, inside the for loop, add the following:

if(inputs[i].hasAttribute('value')){
    inputs[i].parentElement.classList.add('is-filled');
  }

Please let me know if it works.

Best regards, Rares

[liemteksun]

Yes, this works. hopefully this fix will be in the next release

thanks

[rarestoma]

Hi @liemteksun,

We will fix it in the next update that will be published these days.

Thank you, Rares

[abaciocco]

I have this problem, but ONLY IN MODALS. in modal body label behavoir is not triggering.

[groovemen]

Hello @abaciocco,

Thank you for using our products, we have tested the behaviour of inputs inside of modals, but it works as expected. Please let us know how we can reproduce your issue.

Please let us know if we can help you with anything else. All the best, Stefan