Topic: MDB Select has two dropdown carets and selection is misaligned to the right.
waynefulcher pro asked 5 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 5 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 5 years ago
Happy to help! Thanks for sharing your conclusions with others.
Anna Morawska staff answered 5 years ago
Hi there,
it's probably because you have some whitespaces between option tags. Please check out this example.
Best,
Ania
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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