Topic: Select with label in dynamic content
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.
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);
input.init();
input.update();
});
}
meesha81 pro premium priority commented 2 years 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 pro premium priority commented 2 years 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- 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
mlazaru staff commented 2 years 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:
https://mdbootstrap.com/snippets/standard/mlazaru/5000809
meesha81 pro premium priority commented 2 years 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 pro premium priority commented 2 years 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.
mlazaru staff commented 2 years 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 pro premium priority commented 2 years 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.