When applying a style class to a e.g. bootstrapcomponents-textbox, the style class is added to the inner input element which is fair enough. Our project uses responsive containers with various bootstrap components that are positioned using a CSS grid. The grid's items are the boostrapcomponent elements which makes it difficult to target them directly using CSS. Currently, to display the elements correctly in the form editor as well as the browser I need to define multiple rules as such:
- Code: Select all
.form-section {
& bootstrapcomponents-textbox {
&[ng-reflect-style-class*="span--1\/2"] {
grid-column-end: span 6;
}
&:has(.span--1\/2) {
grid-column-end: span 6;
}
}
}
I understand targeting ng-reflect-style-class in production won't work, it's solely a work-around to display items correctly in the form-editor.
Is there a solution to avoid targeting the angular attributes?