Topic: Glitch mdb-select on Chrome with multiple attribute

VDLP priority asked 5 years ago


Expected behavior

Normal page load as you see when you do not have a multiple attribute on MDB multiselect.

Actual behavior

MDB multiselect itself works fine. But when you apply multiple attribute the page loads in a way you see some glitches (styling is not applied for a sec and you see animations on elements growing from small to actual size). Issue only occurs in chrome.

A workaround is applying multiple attribute with jquery before init. But that should not be necessary.

Resources (screenshots, code snippets etc.)

Just normal implementation;

<div class="mdb-select-wrapper">
<select class="mdb-select md-form mt-2 mb-4" multiple>
    <option value="" disabled selected>Selecteer opties</option>
    <option value="1">Optie</option>
    <option value="2">Optie</option>
    <option value="3">Optie</option>
    <option value="4">Optie</option>
    <option value="5">Optie</option>
</select>
<label>Kolom</label>
<button type="button" class="btn btn-secondary btn-sm btn-save">Toevoegen aan filter</button>


<script type="application/javascript">
(function($, window) {
    $(".mdb-select").materialSelect();
}(jQuery, window));

Piotr Glejzer staff commented 5 years ago

Hi,
we already working on that to fix this. Sorry about that.
Best,
Piotr


VDLP priority commented 5 years ago

Hi Piotr,

Is this still an issue? Not working on version 4.8.8 within our project.

We now need to manually apply multiple attribute with JS to solve this issue.

Cheers, Nico


Mikołaj Smoleński staff commented 5 years ago

Are you able to reproduce your issue in our snippets editor? https://mdbootstrap.com/snippets/

Best regards



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.7.4
  • Device: Macbook
  • Browser: Chrome 73.0.3683.75
  • OS: macOS 10.14.3
  • Provided sample code: No
  • Provided link: No