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.id }}">{{ event.title }} ({{ event.event_start | date('d-m-Y') }})</option>
        {% endfor %}

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

</div>

<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>
    </select>
    <label>Teams</label>
</div>
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() {
$('.mdb-select').material_select();
});
section


Piotr Glejzer commented 2 months ago

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


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.

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

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

Best,
Piotr


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.

Regards

 


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

bump


Piotr Glejzer commented 2 months ago

Hi,
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.
Best,
Piotr


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.
Status

Resolved

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