mdb-select with styled label


Topic: mdb-select with styled label

mdb2 pro asked 6 years ago

Ver 6.3.0 suggested (please excuse my late arrival):

  • Select - resolved problems with label styling. For the label to work correctly, we encourage you to add it via [ label ] input instead of HTML tag.

However, adding label attribute to instead of using a separate lacks the ability to style the color of the label and the ability to add tooltip to it using mdbTooltip.

e.g.

<label for="select1" class="active TextRed" mdbTooltip="TOOLTIP">"CAPTION</label>

The label cannot accept the color Red and the tooltip is narrow as the label and not as wide as input + it appears when hovering every select option


Damian Gemza staff answered 6 years ago

Dear @mdb2

I don't think, that you should use Tooltip over the floating label.

Label element is used to describe the usage of a specific input. So for me, using Tooltip there is useless.

If you don't use the [label], you may have problems with the floating label in Select.

Best Regards,

Damian


mdb2 pro answered 6 years ago

There are times where the text in the label is just not enough.

In such cases, adding tooltip over the label helps to convey more information, as tooltips usually do


Arkadiusz Idzikowski staff answered 6 years ago

Using input should be a preffered way, but we recently made some changes to provide similiar functionality for html label. Please try to add the label tag after mdb-select and let us know if you encounter any problems.


mdb2 pro answered 6 years ago

Do you mean that I should add a different label after the mdb-select, like in the good old days, instead of using the [label] attribute ?

What do you mean by "Using input should be a preffered way" ? We are talking about mdb-select, not input


Damian Gemza staff answered 6 years ago

Dear @mdb2

Yes, you should try to use the html <label> element after <mdb-select> like in the good old days.

What do you mean by "Using input should be a preferred way" ? We are talking about mdb-select, not input - the input in the context of Arek message is Angular @Input() mechanism, not the HTML <input> element.

Best Regards,

Damian


mdb2 pro answered 6 years ago

What does @Input() has to do with the label ?


Damian Gemza staff answered 6 years ago

Dear @mdb2

With the @Input() you're passing the text which has to be rendered within the label to the <label> element inside the <mdb-select> component.

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No
Tags