Topic: Label on input is not shown correctly after ajax update

Espen Rønning priority asked 3 years ago

Expected behavior The label is shown in the frame around the input

Actual behavior The label is shown in the frame with the frame going through it.

Resources (screenshots, code snippets etc.)

I'm updating several fields while the section they appear in are hidden. This causes the label to be partly overwritten by the frame around the input.

Please see the above snippet. Pressing Change Value a couple of times - this works well. Now, press Hide Input, Change Value and Show Input. The label is no longer as i should be. Pressing Change Value again while the input is visible does not fix the label.

Michał Duszak staff commented 3 years ago

Hello, do you experience this problem outside of snippets also?

Espen Rønning priority commented 3 years ago

Yes, I experience this in my own solution. The snippet was made to recreate it.

Michał Duszak staff answered 3 years ago

Try using update() method. I have edited your snippet so that everything seems to be working:

I've put init() method outside of event listener, so that we dont initialize the same component over again. Also I've created an updateLabels() function which iterates through every input in order to update the label.

Keep Coding,

  • Michal

Espen Rønning priority answered 3 years ago

This seems to be partly fixed in 3.6.0

But theres still some issues. Inputs in closed accordion items are not fixed. And it seems it relates to the .show class. Please see this snippet:

Only the the label in Accordion Item #1 is shown correctly, even if I open Accordion Item #2 before pressing Change Values.

I tried to add the notch.remove() but it doesn't make it any better.

Michał Duszak staff answered 3 years ago

By the time we fix this, please consider using the workaround function as in the snippets:

cleanNotches(elementClassName); after each init(); should clean unneccessary labels.

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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes