Topic: MDB Select not renders correctly, visually duplicating itself on screen
I am seeing something very strange. After rendering a form, all mdb-select items show duplicated, where in position a "fake" text element can be seen (sample below):
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-043da6c6-f3d8-4b25-89b1-141c1ea7dbac" value="">
Just below this element, a little on the side the real combobox can be seen. Duplication issue screen shot
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Desktop
- Browser: Chrome
- OS: Linux
- Provided sample code: No
- Provided link: Yes
Unicomp pro commented 6 years ago
In the bottom of our page we have this initialization code:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
new WOW().init();
$('[data-toggle="tooltip"]').tooltip();
$(".button-collapse").sideNav();
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
$('.mdb-select').materialSelect();
});
</script>
When I comment out the "new WOW.init()" then the mdb-select controls render normal...
Unicomp pro commented 6 years ago
After more experimentation, when I put the initialization code of the individual mdb-selects into a 250ms delay, then it works.
Ugly!