Style form.alternate versus form.grid odd | even

Questions and answers for designing and implementing forms in Servoy

Style form.alternate versus form.grid odd | even

Postby huber » Wed Apr 11, 2018 5:03 pm

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,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 311
Joined: Mon May 14, 2012 11:31 pm

Re: Style form.alternate versus form.grid odd | even

Postby mboegem » Thu Apr 12, 2018 8:55 am

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.
_____________________
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance SAN Developer

Image
User avatar
mboegem
 
Posts: 1426
Joined: Sun Oct 14, 2007 1:34 pm
Location: Hoofddorp, The Netherlands

Re: Style form.alternate versus form.grid odd | even

Postby huber » Thu Apr 12, 2018 4:31 pm

Hi Marc

mboegem wrote: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:

Code: Select all
/* 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,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 311
Joined: Mon May 14, 2012 11:31 pm

Re: Style form.alternate versus form.grid odd | even

Postby mboegem » Thu Apr 12, 2018 5:32 pm

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
_____________________
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance SAN Developer

Image
User avatar
mboegem
 
Posts: 1426
Joined: Sun Oct 14, 2007 1:34 pm
Location: Hoofddorp, The Netherlands

Re: Style form.alternate versus form.grid odd | even

Postby huber » Mon Apr 16, 2018 8:30 am

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 wrote: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,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 311
Joined: Mon May 14, 2012 11:31 pm

Re: Style form.alternate versus form.grid odd | even

Postby mboegem » Mon Apr 16, 2018 8:49 am

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.
_____________________
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance SAN Developer

Image
User avatar
mboegem
 
Posts: 1426
Joined: Sun Oct 14, 2007 1:34 pm
Location: Hoofddorp, The Netherlands

Re: Style form.alternate versus form.grid odd | even

Postby huber » Mon Apr 16, 2018 11:01 am

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,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 311
Joined: Mon May 14, 2012 11:31 pm


Return to Forms

Who is online

Users browsing this forum: No registered users and 2 guests