Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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 2 years 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 years 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 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 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


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



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

  • 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