Form Editor and the :has() CSS pseudo-class

Discuss all problems you have with Servoy here. It might help to mention the Servoy version and Operating System version you are using

Form Editor and the :has() CSS pseudo-class

Postby seain » Wed Oct 25, 2023 1:26 am

TLDR: does the form editor support the :has() CSS pseudo-class?

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?
seain
 
Posts: 3
Joined: Fri Sep 29, 2023 1:57 am

Return to Discuss possible Issues and Bugs

Who is online

Users browsing this forum: Majestic-12 [Bot] and 3 guests

cron