Topic: Add custom class to Select

Marco Li Mandri priority asked 10 months ago


Expected behavior I need to override "text wrapping" in select option, in some cases. I can't add custom class to Select.

Actual behavior Genrated code of "select" doesn't contain original class of "Select".

Resources (screenshots, code snippets etc.)


Michał Duszak staff answered 10 months ago


It's not quite possible, but there is a trick which allows you to get the element basing on the text content of the option. Here is a snippet in which I use this technique:

https://mdbootstrap.com/snippets/standard/m-duszak/3634023#js-tab-view

document.addEventListener('open.mdb.select', () => {
    setTimeout(() => {
        const allOptions = document.querySelectorAll('.select-option-text');
        const customOptions = Array.from(allOptions).filter(option => option.textContent === 'Two');
        customOptions.forEach(option => {
            option.classList.add('custom-option')
        })
    }, 50)

})

Marco Li Mandri priority answered 10 months ago


Thanks for your answer. What if I need to customize only one option?


Marco Li Mandri priority commented 10 months ago

(with "option" I mean one single element of the select)


Michał Duszak staff answered 10 months ago


Hello, Select gets rendered individually, and doesnt inherit classes from your initial .select input element. You could for example use .select-option selector to change styles of all the options together.



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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No