Input label don't move up

Topic: Input label don't move up

bissounet pro asked 2 months 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

Add comment

Marcin Luczak staff answered 2 months ago

0 0 Best answer

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

Add comment

bissounet pro answered 2 months ago

0 0 Best answer

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 2 months 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 pro commented 2 months ago

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

Marcin Luczak staff commented 2 months 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 pro commented 2 months ago

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

Marcin Luczak staff commented 2 months ago

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

Best, Marcin

Add comment

Write

Create snippet

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: jQuery
MDB Version: 4.19.2
Device: PC
Browser: All
OS: W10
Provided sample code: No
Provided link: No

bissounet

Pro User

85Support score
5Questions 6Answers

0Snippets likes 0Snippets

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes

bissounet

Privacy Preferences