Topic: BUG REPORT: textfield label is overlapped by the textfield border...
I have a form with textfields. With MDBootstrap, when the textfield is displayed the text title acts as a placeholder and, once it is focused on, the title shrinks and moves to the top. There is a border around the content, and the border is not visible behind the label text (no overlapping). If the textfield already has a value, the label should immediately shrink and move to the top anyway (fyi this doesn't always happen either, but this is not the focus of this bug).
The shrinking and moving of the title label only works if the form is visible (eg NOT display:none) at load time.
To repeat the problem: My form is not displayed at load time.My textfields contain values already.
*_Expected behavior_*When my form becomes visible (display:block) the label for each textfield should be shrunken down and moved to the top (as is the standard), because each textfield already contains a value.
*_Actual behavior_*The textfield label does infact display shrunken and is moved to the top, but the border of the textfield is visible behind the label.
Resources (screenshots, code snippets etc.)
Snippet - https://mdbootstrap.com/snippets/standard/softcon/2988569
Screenshot - https://ibb.co/bKHpwCD
I just noticed the "Updating label width" section here:https://mdbootstrap.com/docs/standard/forms/input-fields/
Is this new? Either way, it solves the problem.Once the element is revealed/displayed I run:
document.querySelectorAll('.form-outline').forEach((formOutline) => {
new mdb.Input(formOutline).update();
});
...and it updates correctly.
Thanks
There is also an error with Autocomplete if the element is initially hidden (display:none). The problem stems from the same place I think.
Thanks a lot for a snippet and reporting these bugs. We will try to fix them as soon as possible.
Keep coding,
Dawid
softcon pro premium commented 4 years ago
Did you fix it? I found the "Updating label width" part on the tutorial page but I swear it wasn't there previously. It fixes the problem :)
Dawid Wajszczuk staff commented 4 years ago
As I have checked "Updating label width" part was there. I also didn't notice it. I was about to fix this issue but I'm glad that you have found the solution. Have a nice day :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: PC
- Browser: All
- OS: windows
- Provided sample code: No
- Provided link: Yes
Dawid Wajszczuk staff commented 4 years ago
Hi. Could you please provide a snippet with this issue?
softcon pro premium commented 4 years ago
@Dawid Wajszczuk Yes sure: https://mdbootstrap.com/snippets/standard/softcon/2988569