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: HTML for Form Select option label

aathithan priority asked 4 years ago


Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.) Ability to set formatted text for label in select form control. For example: options = [{ label: "Data(meta data) value: 1 }]


Arkadiusz Idzikowski staff commented 4 years ago

Can you provide an example use case for this feature? You can already change label appearance with css classes.


aathithan priority commented 4 years ago

Let's say I am using the select in a filter panel and I need to show the options with respective counts. I should be able to format the count to be right aligned and a small font instead of the same font as option value. In HTML terms, {span class="option-value"}Value1{span}{span class="option-count"}Count1{span}

P.S: this freaking text box doesn't show HTML :@ so using { instead of <


Arkadiusz Idzikowski staff commented 4 years ago

We are currently considering changing the way you pass options to the component from the input/object to <mdb-option> defined in the html template (like in native select). But until we change that it won't be possible to inject your own html to the component.


aathithan priority commented 4 years ago

That would be great change. When would it be available for us?


Arkadiusz Idzikowski staff commented 4 years ago

The decision on changes to this component has not yet been made. If we make such changes, they will be added probably in update to Angular 10, because we don't want to introduce breaking changes before major update.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: Desktop
  • Browser: chrome
  • OS: mac
  • Provided sample code: No
  • Provided link: No