How to get a gradient background for table rows with JSF and CSS?


Tags: css,jsf,table,background,gradient

Problem :

I can create a gradient backgrond on the rows (see screenshot), but this is hard-coded to 10 rows. The gradient is repeated when there are more than 10 rows.

Can I create a gradient (from white to black) with a dynamically number of rows (5 row, 10 rows, 21 rows, .. depending on the datasource)

This would be a nice JSF exam questin, but I can't figure it out...

DataTabel

<h:outputStylesheet library="default" name="css/style.css" />
<h:dataTable id="persons" value="#{tableBean.persons}" var="person"
             rowClasses="list-row-1, list-row-2, list-row-3, list-row-4, list-row-5, list-row-6, list-row-7, list-row-8, list-row-9, list-row-10">
    <h:column><h:outputLabel value="#{person.firstName}" /></h:column>
    <h:column><h:outputLabel value="#{person.lastName}" /></h:column>
    <h:column><h:outputLabel value="#{person.jobTitle}" /></h:column>
    <h:column><h:outputLabel value="#{person.birthDate}" /></h:column>
    <h:column><h:outputLabel value="#{person.age}" /></h:column>
</h:dataTable>

StyleCheet: default/1_0/css/style.css

.list-row-1 {
    background-color: #FFF;
}
.list-row-2 {
    background-color: #EEE;
}
.list-row-3 {
    background-color: #DDD;
}
.list-row-4 {
    background-color: #CCC;
}
.list-row-5 {
    background-color: #BBB;
}
.list-row-6 {
    background-color: #AAA;
}
.list-row-7 {
    background-color: #999;
}
.list-row-8 {
    background-color: #888;
}
.list-row-9 {
    background-color: #777;
}
.list-row-10 {
    background-color: #666;
}

Can this be done with a Bean? The Gradient should be calculated and fit the total numbers of rows: white=first row; black is last row.



Solution :

This is how I did it:

I updated the dataTable like this:

<h:dataTable id="persons" value="#{tableBean.persons}" var="person" rowClasses="#{tableBean.calculatedRowClasses}">

So, with a bean: rowClasses="#{tableBean.calculatedRowClasses}"

Then I calculate the necessary CSS elements to add in a long string:

public String getCalculatedRowClasses() {
    StringBuilder build = new StringBuilder();

    int total = persons.size();
    int factor = 99 / total;    //divide an integer results in an interger

    build.append("list-row-0");
    for (int i = 0; i < total; i++) {
        build.append(",");
        build.append("list-row-").append(i * factor);   //divide the css over the 100 available in style.css
    }

    return build.toString();
}

This is not the best solution, but it works this case...


    CSS Howto..

    How to choose fontstacks

    How to add content to an input with css? [duplicate]

    How do I change the colour of 'and one other person like this' when I've added it to my site?

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    How to add a new rule to an existing CSS class

    How to create a separated menu with logo in between

    How to Find and replace class with javascript (No JQ)

    how to add embedded ruby in style tag

    how to get particular words with dotted lines in HTML and CSS?

    How to layout list items in groups

    How to center CSS Navigation Menu

    How to check if a particular CSS value exists

    How come the first

    How can I add my own CSS styles to CKEditor

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    how does responsive design work?

    How to draw diagonal lines with css [duplicate]

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    How to insert background image on HTML Tag using css?

    How to apply CSS to only immediate children of a certain class

    How can I make make css transition happen when applying width through javascript

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    How can you print a page that has been altered by javascript?

    how to place an image at the center of the browser irrespective of the resolution?

    How to use external css file to style a javafx application

    How to position the arrow of this widget correctly?

    How to make box container expand when text-field does?

    Make a slide show by fading in background images [closed]

    Mini-map of HTML page sections shown as fixed anchors in viewport

    Adobe Flex Show Content inside Rectangle (itemRenderer)