Styling the Servoyextra-table and columns

Forum to discuss the new web client version of Servoy.

Styling the Servoyextra-table and columns

Postby huber » Wed Feb 03, 2021 6:56 pm

I am experimenting with styling for the newer components, one of them is the servoyextra-table component. I found the selectors .table-servoyextra-header-label { }, and .table-servoyextra-selected { } to work as expected, but can't find selectors for the styling of columns in the table.

Any hints for more servoyextra-table component selectors are very appreciated.

Best regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 405
Joined: Mon May 14, 2012 11:31 pm

Re: Styling the Servoyextra-table and columns

Postby pitc » Wed Feb 03, 2021 10:10 pm

Hi Robert,
If I understand your question:
Using Servoy 2020.12.1
As an experiment I quickly placed a servoyextra-table on my form and added two columns.
Each column has a style class in the properties. I tried a simple background colour for each differently and it renders fine.
I do not usually use the table but rather the Data Grid - which also has a style class for the columns.
Tom
Tom
prospect-saas.com
pitc
 
Posts: 87
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Styling the Servoyextra-table and columns

Postby huber » Thu Feb 04, 2021 11:22 am

Hi Tom

Thanks for your testing. I am on Servoy Developer 2020.03.1. When I add for example a style class .abc {background-color: #ffff00; color: red;} and set the column styleClass property to abc, there is no effect. Other, more general styles like .table-servoyextra-selected {} or .table-servoyextra-header-label {} do work.
May be it's a problem of the Developer version. In the Package Manager, the latest Servoy Extra Components is version 2.1.1.
I am also wondering what the selector name is when the styleClass is set to DEFAULT?

Thanks again and best regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 405
Joined: Mon May 14, 2012 11:31 pm

Re: Styling the Servoyextra-table and columns

Postby pitc » Thu Feb 04, 2021 4:31 pm

This may not help!
I can only see the rendered effect of the style when I launch the NGClient or NGDesktop. Nothing shows in the developer for the column.
I use a .less file to hold all my css and I import the servoy .less file as shown:
Code: Select all
// import of the custom servoy theme properties that will import the hidden servoy theme, this imported file is for customizing the default servoy theme properties

@import 'custom_servoy_theme_properties.less';
@import 'svy-pop-filter.css';
@import 'svy-lookup.css';
@import 'fontawesome.css';

// Add your custom less/css to this file you can use the same less properties that are specified in the above properties.less


Later in my .less I have:
Code: Select all
.pitc-bkg-blue
{
   background-color: #95c0cb;
}
.pitc-txt-default
{
   font-weight: normal;
   font-size: 12pt;
   color:#000000;
   margin: 2px 2px 2px 2px;
   padding: 0px 0px 0px 0px;
   
}

.pitc-txt-default-med:extend(.pitc-txt-default)
{
   font-size: 12pt;
   
}

.pitc-txt-default-med-blue:extend(.pitc-txt-default-med)
{
   color:#0000ff;
}



in the column property I have:
styleClass: pitc-bkg-blue

and
headerStyleClass:pitc-txt-default-med-blue

(see attached screen capture images)

What do you do to specify the style class?
Tom
You do not have the required permissions to view the files attached to this post.
Tom
prospect-saas.com
pitc
 
Posts: 87
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Styling the Servoyextra-table and columns

Postby huber » Thu Feb 04, 2021 7:19 pm

Hi Tom

Thanks for your example. In a NG only solution we use the less file as well. But this solutions has to be brought from Smart Client (forms in absolute layout) to forms with css position layout. So it's a bit more complicated.

Best regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 405
Joined: Mon May 14, 2012 11:31 pm

Re: Styling the Servoyextra-table and columns

Postby pitc » Thu Feb 04, 2021 8:02 pm

Surely the less/css is same for the table columns when using css position layout?
When I first brought over my SmartClient from absolute to css position layout the css style etc had to be changed due to using the new Servoy style.
Maybe make a small example of css position layout with a table and one column then style it. Maybe there is some css hiding the style you want to use.
Tom
prospect-saas.com
pitc
 
Posts: 87
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests