Topic: BUG REPORT: textfield label is overlapped by the textfield border...

softcon premium asked 3 years ago

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 -

Screenshot -

Dawid Wajszczuk staff commented 3 years ago

Hi. Could you please provide a snippet with this issue?

softcon premium commented 3 years ago

@Dawid Wajszczuk Yes sure:

softcon premium answered 3 years ago

I just noticed the "Updating label width" section here:

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.


Dawid Wajszczuk staff answered 3 years ago

Thanks a lot for a snippet and reporting these bugs. We will try to fix them as soon as possible.

Keep coding,

softcon premium commented 3 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 3 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 :)

softcon premium answered 3 years ago

There is also an error with Autocomplete if the element is initially hidden (display:none). The problem stems from the same place I think.

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: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: PC
  • Browser: All
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes