Topic: Select with label in dynamic content

meesha81 priority asked 1 year ago

I have found that dynamic content with inputs with labels can be init by

new mdb.Input(formOutline).init();

But I have not found how to init label for select in dynamic content. Select is initialized successfully with

new mdb.Select(element, options);

But label is propably not initialized correctly, because when you click to select element, blue border go thru the label.

If i put select to div.form-outline container, mdb.Input cause error because no input element not found.

Mateusz Lazaru staff commented 1 year ago

Could you show this bug with blue border going through the label in a snippet? I've tried to reproduce it using template string and init via JS, but it worked for me:

meesha81 priority commented 1 year ago

This problem cause when content is loaded by "ajax" or othere dynamic type and you have to use something like mdb.Input(formOutline) to enable text in the border. I am not sure how to create snippet with dynamical content, but if you call mdb.Input for form-outline elements, result is not so good as it would be...

meesha81 priority commented 1 year ago

This problem solved. This is because of you are making changes in published package of MDB, but still as 6.1.0.

I have downloaded current 6.1.0 version (via Orders menu) 2 months ago and also today to check if you are using the same library. And select.min.css is changed in today 6.1.0 compared to 2 months. It would be nice if you use numbering of versions and if you do minor change, you should change id to 6.1.1 etc.

It could solve some situations like this one.

Mateusz Lazaru staff commented 1 year ago

That's weird because we always update package version, even for minor changes. There were select styles changed in 6.0.1, are you sure you're not comparing 6.0.0 to 6.0.1 or newer?

meesha81 priority commented 1 year ago

It could be because I didn't update all the files when I went to 6.1.0, but I can't tell for sure right now. But yes, it could be my fault. In any case, the bug is outdated and has apparently been resolved since 6.1.0.

Quang Huy Nguyễn priority answered 1 year ago

This works for both select and input:

function updateInputLabel() {
document.querySelectorAll('div.form-outline:has(label.form-label)').forEach(formOutline => {
    const input = new mdb.Input(formOutline);


meesha81 priority commented 1 year ago

Thank you, I'll try it. You have different and propably "better" queryselector for it, because querySelector from documentation for INPUT is not working for select.

meesha81 priority commented 1 year ago

It is really working without needing mdb.Input, select do the job himself. So the selector for inputs can be modifed to ignore "non select" form elements. MDB 6.1.0 2 months old is not the same like MDB 6.1.0 downloaded today. Today version works fine with this form-outline.

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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: PC
  • Browser: CHROME
  • OS: WIN11
  • Provided sample code: No
  • Provided link: No