Topic: MDB Select not renders correctly, visually duplicating itself on screen

Unicomp pro asked 6 years ago


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

 


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!


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: 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
Tags