Topic: How to use placeholder attribute for simple select widget?

mortgagekart priority asked 1 year ago


*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/


silviaquadraweb priority answered 9 months ago


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


Kamila Pieńkowska staff answered 1 year ago


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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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