MDB-Select Alignment in JQuery v4.5.15


Topic: MDB-Select Alignment in JQuery v4.5.15

Neil Jobbins pro asked 6 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


Marta Szymanska staff pro premium answered 6 years ago

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

Neil Jobbins pro answered 6 years ago

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 


Marta Szymanska staff pro premium answered 6 years ago

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 6 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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: 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
Tags