Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Missing data-mdb-placeholder css class

vgoenka free asked 3 years ago


Expected behavior https://mdbootstrap.com/docs/standard/forms/select/#section-select-with-placeholder

Expected to find data-mdb-placeholder class as per the URL above.

Actual behavior

Looked at both 3.1.0 and 3.2.0 but don't see this class.

Resources (screenshots, code snippets etc.)

The documentation on the web should clearly annotate which version these things are introduced in - or perhaps there should be version specific documentation. This is quite frustrating.


Grzegorz Bujański staff commented 3 years ago

What do you mean you don't see this class? Does the attribute: data-mdb-placeholder work for you? This attribute has not been added in the meantime. It has been available since version 1.0.0-alpha2 in which we added the select component.


vgoenka free commented 3 years ago

The attribute didn't work when I tried. (my bad about calling it 'class' in my comment above).

I'm only including mdb.min.css and mdb.min.js. Do I need to include any other file?


Grzegorz Bujański staff answered 3 years ago


When creating the select component, we made sure that it works in the same way as the native select. Therefore, in this case, you cannot set up a placeholder this way. This will only work for Multiselect. You can add an option with an empty value and selected attribute. I also suggest adding a hidden attribute so that it doesn't show up in the options list. This will make select appear as if it had a placeholder. Here's an example: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2862444



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: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Macbook
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes