Cannot target specific Select wrapper via CSS


Topic: Cannot target specific Select wrapper via CSS

UNNdev pro premium priority asked a year ago

Classes assigned to a select are not transferred to the select wrapper upon initialization. This wouldn't be a great problem if the original select was placed before the new select wrapper as you could use something like .the-original-class + .select-wrapper to target the select container. Another option would be generating the wrapper with something like data-mdb-target="#originalSelectId" if the original select has an ID.

Basically, please provide an option so the select wrapper is identifiable and can be targetted with a CSS selector.


Dawid Wajszczuk staff commented a year ago

Hi. Can you please provide a snippet with what you are trying to accomplish? Because every select-wrapper is generated with its own id. Thanks.


UNNdev pro premium priority commented a year ago

Yes, but the ID is unpredictable. I cannot write a CSS such as .select-wrapper.specific-one .form-outline::after { content: "some icon"; position: absolute; right: 2em; top: 50%; transform: translateY(-50%); } to place an icon in a specific select for example, or .select-wrapper.specific-one input { background: red; } to color it.

And since the original select comes after the wrapper in the DOM, I also cannot use something like .specific-one + .select-wrapper .form-outline::after { ... } or .specific-one + .select-wrapper input { ... }.

I can wrap the select in an own div as work-around though.


UNNdev pro premium priority answered 10 months ago

I found another work-around for this problem using a custom container for each select in case one can't wrap the select itself into its own div. See https://mdbootstrap.com/snippets/standard/kayem79/3267835#css-tab-view


Dawid Wajszczuk staff answered a year ago

Hi,

Thanks for your feedback. I have added this to our ideas list and we will discuss this in our team.

Keep coding,
Dawid


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: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.0
  • Device: All devices
  • Browser: All browsers
  • OS: All operating systems
  • Provided sample code: No
  • Provided link: No