Styling the Servoyextra-table and columns

Questions
1

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,

2

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

3

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,

4

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:

// 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:

.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

column_style_rendered.jpg
column_style_rendered.jpg712×637 63 KB

servoy_table_column_style.jpg
servoy_table_column_style.jpg380×341 57.1 KB

5

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,

6

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.