Table header cells style

[maria]

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.

grid.png (3.79 KiB) Viewed 11465 times

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]

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]

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]

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]

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

[martinh]

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]

It shows the columnheader like this:

Capture.JPG (9.57 KiB) Viewed 11339 times

The HTML is like this:

Capture2.JPG (22.36 KiB) Viewed 11339 times

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

Please see the sample solution attached.

Maria,

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

Code: Select all

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

[maria]

It shows the columnheader like this:

The attachment Capture.JPG is no longer available

The HTML is like this:

The attachment Capture2.JPG is no longer available

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

Please see the sample solution attached.

Maria,

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

Code: Select all

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

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

Untitled.png (2.02 KiB) Viewed 11316 times

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]

Some points about these issues:

1. 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)
2. @Maria the sample doesn't work well (so styling with solutionmodel labelfor), please create a case with the sample
3. @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]

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 (?):

Code: Select all

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

[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 (?):

Code: Select all

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]

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 (?):

Code: Select all

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]

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]

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]

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.