MDB Select has two dropdown carets and selection is misalign


Topic: MDB Select has two dropdown carets and selection is misaligned to the right.

waynefulcher pro asked 6 years ago

I just downloaded the latest MDB Pro library 4.6.1 and I am using the Bootstrap.css and .js files which are zipped up with it (4.1.3). 

Here is the code I am using: This as blade code from Laravel but produces the correct values:

<select class="mdb-select md-form" id="cam-model">
<option value="" disabled selected>Select Camera Model</option>
@foreach($models as $model)
<option value="{{ $model->model }}" data-icon="{{ $model->photoUrl() }}" class="camera-icon">
{{ $model->description }} by {{ $model->vendor->vendor_name }}
</option>
@endforeach
</select>

and I use the document initialization javascript:
$(document).ready(function() {
$('.mdb-select').materialSelect();
});

So when the page/select first appears the default selected text is correctly left justified,
however it has two dropdown carets on the right.
When I dropdown the selection and select the option I want, the text for that option is showing but has some strange alignment like it is right justified or something.






waynefulcher pro answered 6 years ago

Thanks, for future readers, the white space was the problem with weird alignment.

Also for the double carets it seems I had some old leftover css for the class .caret which created the second one.

Thanks for your help.


Anna Morawska staff commented 6 years ago

Happy to help! Thanks for sharing your conclusions with others.

 


Anna Morawska staff answered 6 years ago

Hi there,

it's probably because you have some whitespaces between option tags. Please check out this example. 

Best,

Ania


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.15
  • Device: computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No
Tags