Table header cells style

maria · January 18, 2011, 11:07pm

Hi guys,

I’m having an issue styling my table headers. In fact, I just don’t know how to do it.
What I’d like to have in particular is no borders and different fonts.
[attachment=0]grid.png[/attachment]
Please help.
The table is a form in table view, no header part, no field labels, so the header is generated automatically by Servoy.

Cheers,
Maria

P.S. I cannot use a header and put header labels there and attach styles to them because I have a background image in my labels css and if I apply that then the label text disappears Is it normal? Automatic labels look just fine though but yes, how do I style them?

lvostinar · January 19, 2011, 4:18pm

Use labelfor label functionality to style the tableview header ( the labelfor label of the field will give the appearance of the corresponding table header).

maria · January 28, 2011, 5:14am

lvostinar:
Use labelfor label functionality to style the tableview header ( the labelfor label of the field will give the appearance of the corresponding table header).

Sorry, I don’t get it.
When my form is loaded and I try solutionModel.getForm(controller.getName()).getLabels() - I get no labels at all.
How can I use the labelfor if I have no access to the label?

ROCLASI · January 28, 2011, 7:49am

Hi Maria,

Those labels are not there yet. You need to add them to the form and then link them to their corresponding fields using the ‘labelfor’ property. (see the wiki for a little more info).
You can add those labels to the form manually (at design time) or by SolutionModel if you want to automate this for your forms.

Hope this helps.

maria · February 1, 2011, 3:13am

ROCLASI:
Hi Maria,

Those labels are not there yet. You need to add them to the form and then link them to their corresponding fields using the ‘labelfor’ property. (see the wiki for a little more info).
You can add those labels to the form manually (at design time) or by SolutionModel if you want to automate this for your forms.

Hope this helps.

Yes, Rob.
If I do what you say - create a label with a proper labelFor property, I can’t seem to be able to change the label height or apply a css style to it.
What am I missing here?
Please see the sample solution attached.

Cheers,
Maria

test.servoy (9.93 KB)

martinh · February 1, 2011, 8:21am

Can someone please tell what the css format is of tableview headers that are used if you don’t have a labelFor label.

In case I have both labels (used for labelFor) and tableviews without specific labels, I want them to show exactly the same.
So that when I’ve added labels on each form, then I want to restyle the tableview header

martinh · February 1, 2011, 10:16am

It shows the columnheader like this:

[attachment=1]Capture.JPG[/attachment]

The HTML is like this:

[attachment=0]Capture2.JPG[/attachment]

Why is this columnheader only 9px high, while it was created as 70px high?

maria:
Please see the sample solution attached.

Maria,

I had to add the following lines in your sample, to make it work:

	newField.name = "customercontactcode"
	newLabel.text = 'MyText'

maria · February 1, 2011, 10:45pm

martinh:
It shows the columnheader like this:

[attachment=2]Capture.JPG[/attachment]

The HTML is like this:

[attachment=1]Capture2.JPG[/attachment]

Why is this columnheader only 9px high, while it was created as 70px high?

maria:
Please see the sample solution attached.

Maria,

I had to add the following lines in your sample, to make it work:
	newField.name = "customercontactcode"

newLabel.text = 'MyText'

Here’s what I’ve got without adding anything:

[attachment=0]Untitled.png[/attachment]

Martin, what do you mean ‘to make it work’?
It’s not working with or without adding your code - neither the height of the header nor its style.

Could Servoy guys, please, comment on that?

Cheers,
Maria

lvostinar · February 2, 2011, 8:48am

Some points about these issues:

label height is not taken into account for header rendering, this is not supported in 5.2, will be present in 6.0 (so in 5.2 height will always be the default size); maybe you can do some css tricks in 5.2 so the height will be bigger (with margin, for example)
@Maria the sample doesn’t work well (so styling with solutionmodel labelfor), please create a case with the sample
@Martin indeed in webclient the labelor header doesn’t get the default css properties (mainly the background image and border); the behavior is different from Smart Client, you can open a case if you want this behavior in webclient also; in order to see the css properties we use on header you can use Firebug (Firefox plugin)

Karel_Broer · February 10, 2011, 12:41pm

lvostinar:
label height is not taken into account for header rendering, this is not supported in 5.2, will be present in 6.0

Great! So I assume we can define the tableheader in 6 by a seperate style, for example like (?):

tableheader {
	font-family: Tahoma;
	font-size: 9pt;
	font-weight: normal;
	text-align: left; 
        height: 9px;
}

lvostinar · February 10, 2011, 12:46pm

Karel Broer:

lvostinar:
label height is not taken into account for header rendering, this is not supported in 5.2, will be present in 6.0

Great! So I assume we can define the tableheader in 6 by a seperate style, for example like (?):
tableheader {

font-family: Tahoma;
font-size: 9pt;
font-weight: normal;
text-align: left; 
    height: 9px;

}

No, the height is taken from labelfor label design value. If you style the labelfor label with css those values(that work on normal label) will be applied though.

Karel_Broer · February 10, 2011, 1:07pm

lvostinar:
Karel Broer:

lvostinar:
label height is not taken into account for header rendering, this is not supported in 5.2, will be present in 6.0

Great! So I assume we can define the tableheader in 6 by a seperate style, for example like (?):
tableheader {

font-family: Tahoma;
font-size: 9pt;
font-weight: normal;
text-align: left; 
    height: 9px;

}

No, the height is taken from labelfor label design value. If you style the labelfor label with css those values(that work on normal label) will be applied though.

Got that. Thank you.

Robert_Huber · February 10, 2011, 2:46pm

Hi

I support Karel’s request for styling a table view column just the standard way in doing it with a css keyword like tableHeader (as Karel suggested) and definig it’s properties. The current form with the labelfor is just complicated without any (obvious) advantages.

Karel, have you made a request for this? Would be sensible, wouldn’t it.

Thanks and best regards, Robert

martinh · February 10, 2011, 2:56pm

Robert Huber:
I support Karel’s request for styling a table view column just the standard way in doing it with a css keyword like tableHeader (as Karel suggested) and definig it’s properties. The current form with the labelfor is just complicated without any (obvious) advantages.

I fully agree. I asked exactly the same solution.

To much overhead with that labelFor construction.

Also using css styles, webclient will look (almost) the same as smart client, which is not the case today.

Karel_Broer · February 10, 2011, 4:05pm

Robert Huber:
I support Karel’s request for styling a table view column just the standard way in doing it with a css keyword like tableHeader (as Karel suggested) and definig it’s properties. The current form with the labelfor is just complicated without any (obvious) advantages.

That’s exactly what I would like. Just a standard way to set the tableheader style by CSS.

Karel, have you made a request for this? Would be sensible, wouldn’t it.

It would be sensible for sure, Robert. Case 356323 created for this.

Robert_Huber · February 10, 2011, 10:46pm

Thanks, Karel

Regards, Robert

sbutler · February 11, 2011, 10:07pm

Karel Broer:
That’s exactly what I would like. Just a standard way to set the tableheader style by CSS.
It would be sensible for sure, Robert. Case 356323 created for this.

+1

ngervasi · February 16, 2011, 11:22am

+1

ROCLASI · February 17, 2011, 3:25pm

+1

Harjo · February 17, 2011, 3:56pm

if you dont want to wait, for this feature in Servoy6 and want it already in Servoy 5, we will provide (soon) a template that you can use. No hacking, just a pure new template under your: server/webapps/ROOT/servoy-webclient/templates/myowncss/

the only thing you have to do, in your solution startup method is call this method:

application.setUIProperty(APP_WEB_PROPERTY.WEBCLIENT_TEMPLATES_DIR, 'myowncss');

Everything is done and tested & crossbrowser! For Internet Explorer a small 1px gradient image is used, for Firefox, Chrome, Safari, Opera, everything is done with CSS (even the gradients)
You can even set the tableheader height!! :-)

It will look like this: (Remember, look closely!! this is web-client, NOT smart-client :-) )
[attachment=1]css1.png[/attachment]
[attachment=0]css2.png[/attachment]

The only thing left that we can’t style ourselfs is the CSS of the FormInDialogs, I’m already in discussion with Servoy, to see if in Servoy 6 the CSS can be brought also, to the default_servoy.css

Topic		Replies	Views
Tableview columns Classic Servoy	7	3157	December 4, 2011
Table view header height in Windows 7/8 Classic Servoy	14	13101	June 18, 2014
LabelFor in Tableview (new in 3.5.6); Missing functionality Classic Servoy	1	1565	May 26, 2008
Missing table header bottom line Classic Servoy	5	5320	October 28, 2015
Table header CSS issue Classic Servoy	1	2681	May 20, 2014

Table header cells style

Related topics