Flex Component

Forum to discuss the new web client version of Servoy.

Flex Component

Postby Gordon McLean » Mon Aug 19, 2019 6:54 pm

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
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Flex Component

Postby paronne » Tue Aug 20, 2019 9:46 am

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:

Code: Select all
// 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;
}


2) 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
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Flex Component

Postby Gordon McLean » Tue Aug 20, 2019 10:38 am

Brilliant thanks Paolo !! Thats a great help thank you

Best
Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK

Re: Flex Component

Postby Gordon McLean » Tue Aug 20, 2019 10:50 am

Brilliant thanks Paolo !! Thats a great help thank you

Best
Gordon
Gordon McLean
Clickdigital.com
Gordon McLean
 
Posts: 253
Joined: Wed Aug 03, 2005 12:24 pm
Location: UK


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 7 guests