How to Assign style sheet to form

Forum to discuss the new web client version of Servoy.

How to Assign style sheet to form

Postby pitc » Thu Oct 22, 2020 7:34 pm

(I have been away from Servoy for a while...bear with me!)
I cannot find a way to assign style sheet to all forms.
I have been (slowly!) learning how to use NG Client. I started out by creating a style sheet based on older style sheet converted by prefixing ".svy-" Then saved as .less.
I have a solution based on smart & web client that I would like to convert to NG Client.
I assigned at solution level property the new style sheet (.less version).
The IDE indicated that the old style sheet on the form was invalid - so I used quick fix to clear that flag.
Now the IDE says all my form elements do not have a valid style sheet.
Is there a way to assign a style sheet to each form or is it only done at solution level?
Or should I put back the non-NG style sheet?
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: How to Assign style sheet to form

Postby paronne » Fri Oct 30, 2020 5:25 pm

Hi

Styling in NG Client is different compared to Smart&Web Client styling.
The .less style is indeed set at solution level and not ad form level anymore.
I believe you have already followed the wiki to convert Smart/Web Client styleSheets into NG Client Style ( https://wiki.servoy.com/display/DOCS/St ... e+NGClient ).

In NG you can't set a style property to a form anymore (will be ignored) but you can set a styleClass property.
In the styleClass property you can add one ore more CSS classes defined in your .less file.
Based on CSS3 rules you can use styleClass to apply special styling to specific forms.

For example you may have generic style to apply a gray color to all your fields.

Code: Select all
.svy-field {
    color: #777;
}


You may want to use black color to all fields into a specific form. You can then set the styleClass=myform-black-color to the form and in the .less file add the rule

Code: Select all
.myform-black-color  .svy-field {
    color: #000;
}


With the following rule, all the fields within the form (note it will apply also to nested forms in case there are tabs/tabpanels) with styleClass myform-black-color will override the default field color.

Same concept, using styleClass, can be used at elements level to style a specific element.

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 4 guests

cron