Topic: Input label don't move up

bissounet free asked 3 years 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

RPringle pro answered 1 year 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 1 year 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

bissounet free answered 3 years 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 3 years 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 free commented 3 years ago

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

Marcin Luczak staff commented 3 years 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 (MDB5) or these docs (MDB4).

I'm sorry for this misunderstanding. Best, Marcin

bissounet free commented 3 years ago

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

Marcin Luczak staff commented 3 years ago

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

Best, Marcin

Marcin Luczak staff answered 3 years ago


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

Regards, Marcin

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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