Topic: Wrong label line on input

Salvador Criado free asked 2 years ago


Expected behavior

Not showing the line over the label.

Actual behavior

The line of the input text override the label.

Resources (screenshots, code snippets etc.)

enter image description here


Mikołaj Smoleński staff commented 2 years ago

There may be two reasons of such issue:

  1. No mdb.min.js file imported in project

  2. Input is loaded dynamically and in such case it has to be initialized manually : https://mdbootstrap.com/docs/standard/forms/input-fields/#section-dynamic-input-initialization\

Best regards


Salvador Criado free commented 2 years ago

I've check those solutions and they are not working. Here I reply de error

https://mdbootstrap.com/snippets/standard/salvador_criado/2545257#html-tab-view

Regards.


Mikołaj Smoleński staff commented 2 years ago

It's a second case with dynamically loaded content. I fixed an issue in your snippet.

Best regards


Michał Duszak staff answered 1 year ago


It looks like your input has been initiated before. Is there anymore code in this project, that may affect this issue? For now, try operating on an instance, like this:

//make its label active
        document.querySelectorAll('.form-outline').forEach((formOutline) => {
            console.log(formOutline);
            mdb.Input.getInstance(formOutline).update();
          });
} 

smachesney free answered 1 year ago


Hi I'm having the same issue: text input

And my code:

    Object.keys(jobDataField)
        .forEach(function eachKey(key) {
            let thisId = `#${key}`;
            if (jobDataField[key] != null && jobDataField[key] !== '0' && jobDataField[key] !== '' && jobDataField[key] !== 0) {
                $(thisId).val(jobDataField[key]);
            }
        });
        //make its label active
        document.querySelectorAll('.form-outline').forEach((formOutline) => {
            console.log(formOutline);
            new mdb.Input(formOutline).update();
          });
} 

Can you please help, thanks



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 1.0.0
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags