Multiple selects styling not the same as demo section...

FvsJ101 asked 2 months ago

<div class="md-form">
    <select name="event" class="mdb-select colorful-select dropdown-ins">
        <option value="" disabled selected>Choose the event</option>
        {% for event in events %}
            <option value="{{ }}">{{ event.title }} ({{ event.event_start | date('d-m-Y') }})</option>
        {% endfor %}

    <small class="form-text text-muted">
        Event the team will compete in.


<div class="md-form">
    <select id="multiSelect" class="mdb-select colorful-select dropdown-primary" multiple>
        <option value="" disabled selected>Choose your country</option>
        <option value="1">USA</option>
        <option value="2">Germany</option>
        <option value="3">France</option>
        <option value="4">Poland</option>
        <option value="5">Japan</option>
As you can see i have more than one select on the form. My issue is that the multi select check boxes does not 
look anything like the template section

Please advise...

FvsJ101 commented 2 months ago

Just a added not i have added the
$('document').ready(function() {

Piotr Glejzer commented 2 months ago

So you resolved your own problem, and you already don't need help, do you? Can I close this topic?

FvsJ101 commented 2 months ago

No Its not resolved... I have the two selects but the styling for the multi select does not look anything as like on the demo section. not sure if i missed a section detailing css i need to add to the page or not...

Piotr Glejzer commented 2 months ago

Sorry about that. It's bug. I have temporary solution for you now. We will try to fix that qucikly.

label.btn input[type=checkbox]+label:before,
label.btn input[type=checkbox]:not(.filled-in)+label:after {
top: -11px;

label.btn input[type=checkbox]:checked+label:before {
top: -12px;


FvsJ101 answered 2 months ago

Hi MDB team,

Ive downloaded the new version of MDBootstrap and i see what you guys did with the multi select styling. It now works on my project. Thanks for the help and feedback.

You can close/ resolve this issue.


Keep up the good work.



FvsJ101 answered 2 months ago

Hi, I added the style you supplied and still nothing and no difference..

<span class="filtrable"><input disabled="" type="checkbox"><label></label>Choose your teams</span>

Thats the code rendered on my project, but what i noticed on the demo section there is a before and after psudo code added but its still not added by mine.

FvsJ101 answered 2 months ago


Piotr Glejzer commented 2 months ago

It's a bug. We are very sorry about that. We put that to our task to do so we will resolve that in next release. But, is that code what I gave you before weekend doesn't work? In my test, it changed a height of checkbox to equally with options.

FvsJ101 commented 2 months ago

Hi, The code you sent doesnt work in my application... is there an eta on the next release?

Piotr Glejzer commented 2 months ago

Did you clear cache? We will fix this for 2 weeks probably. I am 100% sure that in next release. Sorry again for that.

FvsJ101 commented 2 months ago

I have cleared my cache, But its no problem the project isnt going live for a while so if you guys fixing this in the new build 100% :)

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No