Topic: Add custom class to Select

Marco Li Mandri priority asked 2 years 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 2 years 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 2 years ago


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


Marco Li Mandri priority commented 2 years ago

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


Michał Duszak staff answered 2 years 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

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