Style form.alternate versus form.grid odd | even

Classic Servoy
1

Hi All

Styling a Table view (locked) form in the Smart Client: Is there any advantage/disadvantage using either the css styles form.alternate odd | even { … } versus form.grid odd | even { … }. As I can accomplish the same result, I am wondering when to use one or the other?

Best regards,

2

Hi Robert,

there’s very little information you’ve exposed in order to get your question answered.

So just a lucky guess here:
These are both style-classes in you style sheet?
Then I’d say whether it’s best to use one or the other is depending on any other style properties which are applied in these classes.

In general using style classes for odd/even rendering is more efficient than using onRender or even the rowBgCalculation event handler we used to have back in the days.

3

Hi Marc

mboegem:
Hi Robert,

there’s very little information you’ve exposed in order to get your question answered.

So just a lucky guess here:
These are both style-classes in you style sheet?
Then I’d say whether it’s best to use one or the other is depending on any other style properties which are applied in these classes.

In general using style classes for odd/even rendering is more efficient than using onRender or even the rowBgCalculation event handler we used to have back in the days.

Yes, I have both style-classes in my style sheet. The form.alternate odd | even and form.grid odd | even lead to the same result (when applied on the form) but I am asking myself is there one of them better suited, i. e. more flexible for certain yet not known future requirements?

Part of the style sheet look like this:

/* FORM STYLES */
form, odd, even {
	background-color: transparent;
}

form.alternate odd {
	border-color: #f0f7ff;
	border-width: 0px 0px 1px 0px;
}

form.alternate even {
	background-color: #fcfdff;
	border-color: #f0f7ff;
	border-width: 0px 0px 1px 0px;
}

form selected {
	background-color: #b5d5ff;
}

form.grid {
	border-color: #eeeeff;
}

form.grid odd {
	background-color: #ffffff;
	border-color: #f0f0f5;
	border-width: 0px 0px 1px 0px;
}

form.grid even {
	background-color: #ffffff;
	border-color: #f0f0f5;
	border-width: 0px 0px 1px 0px;
}

form.grid selected {
	background-color: #b5d5ff;
}

Regards,

4

Hi Robert,

it depends on your background color of the element behind your table how similar these 2 stylings look.
If that is near white the background color of the rows should be almost similar, however ‘grid’ will force it to be white no matter what.

the selected row color is similar for both styles, but ‘alternate’ inherited this from the default form selected subclass.

also the bordercolors are different, slightly blue vs. light grey, but that’s hard to see.

In total I think the ‘grid’ version would be my choice, since it sets some of the styling properties explicit and doesn’t depend on other behaviour.

Hope this helps

5

Hi Marc

As far as I can see both style classes allow to set the same properties and in this sense set (force) what to display if the corresponding property is set in the style class. Even if one of them inherits some properties. Or are there cases where this is not true and therefore the grid style class is to be preferred? Is that what you mean?

mboegem:
Hi Robert,

it depends on your background color of the element behind your table how similar these 2 stylings look.
If that is near white the background color of the rows should be almost similar, however ‘grid’ will force it to be white no matter what.

the selected row color is similar for both styles, but ‘alternate’ inherited this from the default form selected subclass.

also the bordercolors are different, slightly blue vs. light grey, but that’s hard to see.

In total I think the ‘grid’ version would be my choice, since it sets some of the styling properties explicit and doesn’t depend on other behaviour.

Hope this helps

Best regards,

6

Hi Robert,

What I mean is the ‘odd’ background color from the ‘alternate’ function isn’t set. It inherits the ‘form odd’ styling, which is transparent.
So if you have a green tabpanel bg-color, and you’re displaying a tableview with the styling set to ‘alternate’, you’ll see the odd row bg-color appear in green since it’s transparent thus allowing the background behind that to be visible.
And if you’re changing the tabpanel bg-color to blue, yellow or red… I think you get the point.
Even if you set a forms part bg-color to another color than white, it will appear as that color.

That’s what I like more of the ‘grid’ version, since that has an explicit bg-color set for both odd and even rows.

7

Hi Marc

Thanks for detailing! I didn’t know that and never noticed it because I didn’t have this use case. Surprisingly, how long some things work without being absolut correct ;-)

In this regard grid is really preferable.

Regards,