Flex Component

Classic Servoy
1

Hi

Is there a way with the flex-content and flex-items to address specific items ie I want to turn off a number of my flex items or set display:none to a specific items?

I had naively expected each item when named to become an element but neither the component wrapper (flex-content) or the flex-items appear addressable even when named. Looking at the code in the browser svy-name appears to be the name of the element ie svy-name=“F2” is there a way to address this in css for instance #F2 {display:none} or similar ??

Any tips appreciated

best
Gordon

2

Hi Gordon,

Responsive Containers indeed cannot be manipulated at runtime using elements.xxx as they are not stateful.
You can still achieve your desired behavior of hiding some flex-item under certain conditions.
You have 2 possible approaches, both valid, is just a matter of preference which you like the best.

  1. you can add a specific class to the flex-item you want to target in CSS ( e.g. : my-flex-item-1 ).
    You can then use plugins.ngclientutils.addFormStyleClass(formname,styleclass) ( and plugins.ngclientutils.removeFormStyleClass(formname,styleclass)) to add/remove a styleclass to the form (.e.g hide-my-flex-item-1)

In CSS you can then use the combination of these 2 classes to hide your flex item; since the flex-item will be nested within your form’s DIV, you can use such CSS:

// target the my-flex-item nested at any level within the hide-my-flex-item-1
.hide-my-flex-item-1 .my-flex-item-1 {
      display: none;
}
  1. an alternative approach can be to make your flex-item a Form Component and add it to the form using the Form Component Container. The Form Component Container has a styleClass property which can be manipulated at runtime, therefore you can add/remove the class “hidden”, which will set display to none to the Form Component Container itself.

Regards,
Paolo

3

Brilliant thanks Paolo !! Thats a great help thank you

Best
Gordon

4

Brilliant thanks Paolo !! Thats a great help thank you

Best
Gordon