Topic: How to use placeholder attribute for simple select widget?
*Expected behavior*Placeholders should shown for simple select components.
*Actual behavior*Placeholder is working only if the multiple attribute is activated.
Resources (screenshots, code snippets etc.)
<select class="select" data-mdb-placeholder="Example placeholder">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
https://mdbootstrap.com/docs/standard/extended/select-list/
It's not a bug. It's because select default behaviour is to have an option selected from the beginning. If you want to prevent that you need to add an empty option. https://mdbootstrap.com/snippets/standard/kpienkowska/5645607
I have the same issue and adding an empty option introduces more unexpected behaviours, try simply wiht this piece of code:
<select data-mdb-select-init data-mdb-placeholder="Example placeholder" data-mdb-clear-button="true">
<option></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
and you will see that having a placeholder with an empty option and a clear button actually breaks all the functionality. I've tested that using mdbootstrap.com snippets which at the moment of writing uses 7.1.0 PRO version
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes