BUG REPORT: textfield label is overlapped by the textfield b


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

softcon pro premium asked a year 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 - https://mdbootstrap.com/snippets/standard/softcon/2988569

Screenshot - https://ibb.co/bKHpwCD


Dawid Wajszczuk staff commented a year ago

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


softcon pro premium commented a year ago

@Dawid Wajszczuk Yes sure: https://mdbootstrap.com/snippets/standard/softcon/2988569


softcon pro premium answered a year ago

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


softcon pro premium answered a year 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.


Dawid Wajszczuk staff answered a year ago

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 a year 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 a year 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 :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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