MDB-Select Alignment in JQuery v4.5.15

Topic: MDB-Select Alignment in JQuery v4.5.15

Neil Jobbins pro asked 5 years ago

We are having some alignment issues with the MDB-Select in version 4.5.15. Items that are loaded/pre-selected do not align with items that have been selected. I check your docs and there is the same issue. Please can you take a look and advise of a fix.

Thanks

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

we will fix this in the next release but also, you can do it by yourself. In mdb.min.js find this line:

<span class="filtrable">').concat(c," ").concat(r," ").concat(e.html(),"</span>

and replace it with this one:

<span class="filtrable">').concat(c,"").concat(r,"").concat(e.html(),"</span>

Best,

Marta

Add comment

Neil Jobbins pro answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

Thanks Marta,

We are using the js/dist/material-select.js file from the Gulp package so I replaced:

this.$materialOptionsList.append($("<li class=\"".concat(disabled, " ").concat(optgroupClass, "\">").concat(iconHtml, "<span class=\"filtrable\">").concat(checkboxHtml, " ").concat(fa, " ").concat($nativeSelectChild.html(), "</span></li>")));

with:

this.$materialOptionsList.append($("<li class=\"".concat(disabled, " ").concat(optgroupClass, "\">").concat(iconHtml, "<span class=\"filtrable\">").concat(checkboxHtml, "").concat(fa, "").concat($nativeSelectChild.html(), "</span></li>")));

This worked perfectly, thanks again for your help,

Neil

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,

Marta

Neil Jobbins pro commented 5 years ago

Hi Marta,

Please try the following;

1) go to the MD Select docs https://mdbootstrap.com/docs/jquery/forms/select/#color

2) Change the value of Blue select to option 3

3) Compare the alignment with purple select and orange select.

I tried to add an image to this message but was unable to, can you guide me?

Thanks,

Neil

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.10
Device: MacBook
Browser: Chrome
OS: OSX
Provided sample code: No
Provided link: No

Neil Jobbins

Pro User 75Support score
4Questions 6Answers 2Snippets