Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
The CdsSelect element will make select tags to render with inline CSS styles that place padding-left and padding-right with an !important tag, making impossible (or at least difficult) to change the X-axis padding on the select element.
How to reproduce
Implement any CdsSelect as per instructions in the documentation
Steps to reproduce the behavior:
Create a CSS file to alter the style on the cds-select tag
Use --padding and set it to 0 30px
Check the styles being applied using the development console inspection
Expected behavior
It should be possible to change the padding on the X-axis on the CdsSelect element.
Versions
Clarity project:
[x] Clarity Core
[ ] Clarity Angular/UI
Clarity version:
[ ] v5.x
[x] v6.x
Framework:
[ ] Angular
[ ] React
[ ] Vue
[x] Other: This happens in core
Framework version:
N/A
Device:
Type: Dell laptop
OS: Windows 11
Browser Chrome (but most likely all browsers)
Version latest
Additional notes
Please note that this behavior overrides the internally set --padding value too.
squidjam
commented
1 week ago
Describe the bug
The
CdsSelectelement will make select tags to render with inline CSS styles that place padding-left and padding-right with an!importanttag, making impossible (or at least difficult) to change the X-axis padding on the select element.How to reproduce
Implement any CdsSelect as per instructions in the documentation
Steps to reproduce the behavior:
--paddingand set it to0 30pxExpected behavior
It should be possible to change the padding on the X-axis on the
CdsSelectelement.Versions
Clarity project:
Clarity version:
Framework:
Framework version: N/A
Device:
Additional notes
Please note that this behavior overrides the internally set
--paddingvalue too.