Input label don't move up


Topic: Input label don't move up

bissounet asked a year ago

Expected behavior When an input field is set, the label should automatically move up.

Actual behavior No animation, the input keeps a basic behaviour Resources (screenshots, code snippets etc.) enter image description here


Marcin Luczak staff answered a year ago

Hi,

Can you please provide the code you are using to achieve this input? Using code from the documentation seems to be working fine. Please see my snippet https://mdbootstrap.com/snippets/jquery/marcin-luczak/2852627

Regards, Marcin


bissounet answered a year ago

OK, the code in your snipet works better than the one given in the mdb input code page : class "form-outline" alone instead of "md-form form-outline". Maybe should you correct it... Anyway, thank you Marcin !


Marcin Luczak staff commented a year ago

Thank you for your suggestion. Moving label is a behavior for material design input, and this is why you need to add md-form to form-outline to achieve this functionality.

Best, Marcin


bissounet commented a year ago

I agree with you, but the code in question was under a moving label demo ...


Marcin Luczak staff commented a year ago

Having read your comment about form-outline now I've realized you might have been using the documentation for MDB5 instead of MDB4(jQuery version). In MDB5 forms components use form-outline and in MDB4 we use md-form md-outline. Please check whether you've been using these docs https://mdbootstrap.com/docs/standard/forms/input-fields/ (MDB5) or these docs https://mdbootstrap.com/docs/b4/jquery/forms/inputs/#outline-inputs (MDB4).

I'm sorry for this misunderstanding. Best, Marcin


bissounet commented a year ago

OK thank you Marcin. I'm just starting to understand your (complex) offer ;-) Best, Jean-Luc


Marcin Luczak staff commented a year ago

I'm glad that everything is ok, now. I wish you a pleasant work with our product :)

Best, Marcin


RPringle pro answered 2 months ago

I am having the same problem. I am using MDB 4.0. I downloaded the demo project as a ZIP, and have added code from every demo I could find.

Current HTML is as follows:

Material Design for Bootstrap Input text

<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>


Mikołaj Smoleński staff commented 2 months ago

@RPringle do you use the code dedicated for MDB4 jQ version? In the previous thread the issue was connected with the code for MDB5 used with MDB4 UI KIT.

Keep coding,  Mikołaj from MDB


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.2
  • Device: PC
  • Browser: All
  • OS: W10
  • Provided sample code: No
  • Provided link: No