Topic: Label on input is not shown correctly after ajax update
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.) https://mdbootstrap.com/snippets/standard/ererling-sande-no/3036091#js-tab-view
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.
By the time we fix this, please consider using the workaround function as in the snippets: https://mdbootstrap.com/snippets/standard/m-duszak/3041033#js-tab-view
cleanNotches(elementClassName); after each init(); should clean unneccessary labels.
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: https://mdbootstrap.com/snippets/standard/ererling-sande-no/3065980#html-tab-view
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.
Try using update() method. I have edited your snippet so that everything seems to be working: https://mdbootstrap.com/snippets/standard/m-duszak/3068090#js-tab-view
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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
Michał Duszak staff commented 4 years ago
Hello, do you experience this problem outside of snippets also?
Espen Rønning pro premium priority commented 4 years ago
Yes, I experience this in my own solution. The snippet was made to recreate it.