A while back on Symantec Connect, michael.george wrote about his preference of the ListSelect component over the Grid component (with which I wholeheartedly agree). With some effort and practice, the ListSelect can be made not only visually more appealing than the Grid, but also functionally better.
I’m going to preface this article with a bit of initial configuration – to get to the meat of the CSS needed to alternate the row colors, jump to the bottom.
So to start, here is our typical, vanilla ListSelect component:
Functionally, that component works fine as-is. However, with a bit of scripting, it can be made easier to use, and excessively easier on the eyes. In this article I’m going to focus on styling the rows themselves with alternating colors, but here is another article detailing the steps to take to use image links instead of text.
First, the interior of the ListSelect component:
On the inside of the “Item Format” designer, we will want to insert a table to make it easier to control the data layout with our CSS script.
Next, drag the variables from the Data panel on the left, to the designer palette on the right, placing the variables into the table cells as you want them situated on the page.
When the variables and outcomes are all situated, go into the HTML source tab and edit the table so that the awful borders aren’t showing.
Back out at the Form editor, right-click any empty space and edit the theme for the form by selecting “Templates -> Edit Templates”. Select the applied theme and add a custom style. In this example, I’ve named it .aAdminListSelect. Apply this style to the ListSelect component on the form.
Add an IncludeHTML component to the form page. Here is the CSS I’ve used in the example above.
<style>
/***.gaAdminListSelect***/
.gaAdminListSelect td {
font-family: "Segoe UI", Verdana, Serif;
color: #666666;
font-size: small;
}
.gaAdminListSelect:focus {
outline: none;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(1) {
font-weight: bold;
min-width: 100px;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(2) {
min-width: 300px;
max-width: 300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(3) {
min-width: 80px;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(4) {
min-width: 12px;
max-width: 12px;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(5) {
min-width: 30px;
max-width: 30px;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(n+6) {
min-width: 12px;
max-width: 12px;
}
.gaAdminListSelect tr td a {
width: 100%;
height: 100%;
display: block;
}
.gaAdminListSelect > table > tbody > tr:nth-child(odd) {
background-color: #f9ecec;
}
/******************************************/
/******************************************/
/***Labels***/
.gaTableHeader {
text-align: left;
font-size: 14px;
text-transform: uppercase;
border-bottom: solid silver 1px;
border-top: none;
border-left: none;
border-right: none;
font-family: "Segoe UI", Verdana, Serif;
color: #525252;
padding-left: 6px;
padding-top: 4px;
overflow: hidden !important;
}
</style>
Note: the style tags must be included in the embedded script of the IncludeHTML component in order for the CSS to work.
So the basis of this article is to point out how to alternate colors in the data of a ListSelect component. This snippet is what controls the example data illustrated in this article:
.gaAdminListSelect > table > tbody > tr:nth-child(odd) {
background-color: #f9ecec;
}
If two colors are desired (instead of a single color on odd rows and the default white on even rows), just add another script block to indicate the color for the even rows:
.gaAdminListSelect > table > tbody > tr:nth-child(odd) {
background-color: #f9ecec;
}
.gaAdminListSelect > table > tbody > tr:nth-child(even) {
background-color: #cccccc;
}
And you get this:
More information on the CSS concepts used for this example can be found here:
CSS Child Selectors
CSS Descendant Selectors
CSS nth-of-type
