Discussion
Scotiabank
CA
Last activity: 6 Jan 2017 17:26 EST
Zebra striping/Odd-Even item styling in Repeating Dynamic Layout
Hello
I have a query regarding Odd/Even item styling in Repeating Dynamic Layout. We have a requirement that odd and even items in a repeating dynamic layout would have different styles. How to achieve this using OOTB features?
If we use ‘Grid Repeat Layout’, we can customize the row styling in Skin rule and specify different styles for odd/even rows, below is an example how it looks. However we want use Repeating Dynamic Layout as it is responsive and fully HTML5 compliant.
We added a Section in Grid repeat row which shows the name.
We have done the same thing using Repeating Dynamic Layout, below is the output and we are unable to configure the odd/even item styling.
Please let us know if there is any way to achieve the Odd/Even item styling in Repeating Dynamic Layout.
INCESSANT TECHNOLOGIES
IN
Try this approach.
In the section referred within the Repeating Dynamic Layout, have two layouts (both refers to the same content).
Example:
Layout1: Hi there, My name is .Name ---> Visible when index is even
Layout2 (Different color) : Hi there, My name is .Name --> visible when index is odd.
I havent tried it practically. But I hope this would help.
Scotiabank
CA
Hi SATHYA
Thanks for our suggestion but I don’t have any property which holds the value of current index. Is there any OOTB property which can be used?
Regards,
Sandeep
Pegasystems Inc.
IN
Currently, the odd-even styling is not supported out of the box in Repeating Dynamic Layout. Either you have to use visible whens to check the index of the section page in the page list or you have to do it with custom CSS.
Example custom CSS:
div[data-repeat-source] > div:nth-child(odd) {
background: green;
}
div[data-repeat-source] > div:nth-child(even) {
background: blue;
}
Scotiabank
CA
Hi Jaibatrik
Thank you for your response, I have customized the script little bit using jQuery and able to do odd/even row styling.
Thanks,
Sandeep
Rulesware
SV
Hi,
I'm getting some troubles applying zebra style using jQuery in a correspondence rule, can you give me a hand please?
$("tr:odd").addClass("odd");
.odd {
background: #ccc;
}
thanks