Css – JSF 2.0 change datatable row height

cssjsf

I do not know if there is anything specific with styling JSF datatable but I can not get the row height changed.

Here is my datatable:

<h:dataTable value="#{myBean.myValue}"
             rowClasses="dt_row"
             var="o">


</h:dataTable>

Here is my css dt_row class:

.dt_row {
    height: 10px;
}

But when the rows is generated the height remains the same no matter what values I specify in my css class.
The source of generated page looks like this and it seems ok:

<tr class="dt_row">

Any ideas?

Here is my whole table:

    <h:dataTable value="#{searchBean.searchResult.concordances}"
                 styleClass="table"
                 var="concordance">

        <h:column>
            <pre>#{concordance.left}</pre>
        </h:column>

        <h:column>
            <pre style="color: blue;">#{concordance.middle}</pre>
        </h:column>

        <h:column>
            <pre>#{concordance.right}</pre>
        </h:column>

    </h:dataTable>

Best Solution

HTML tr doesn't have height attribute. The height can be defined for td.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>DataTable Row Height Sample</title>
        <style type="text/css">
            table {
                width: 200px;
            }
            table tr {
                color: darkorange;
            }
            table tr td {
                height: 80px;
            }
        </style>
    </h:head>
    <h:body>
        <h:form id="myForm">
            <h1>Show data</h1>
            <!-- check that I'm using styleClass, not rowClass -->
            <h:dataTable id="dataTable" var="data" value="#{datatableBean.lstData}"
                border="1" styleClass="table">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="ID" />
                    </f:facet>
                    <h:outputText value="#{data.id}" />
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Value" />
                    </f:facet>
                    <h:outputText value="#{data.value}" />
                </h:column>
            </h:dataTable>
        </h:form>
    </h:body>
</ui:composition>

UPDATE:

I've tested this in Chrome 18 and IE 9. I'll include images of the table changing only the td height:

height: 30px;

enter image description here

height: 50px;

enter image description here

height: 10px;

enter image description here

As you can see, the row height changes. Maybe you're testing in Internet Explorer and your style changes are not updated. To change its behavior, go to Tools / Internet Options then in the section Browsing History select Settings a popup will appear, in the section Temporary Internet Files check the first option Every time I visit the webpage now select OK to close the popup and OK again to close the Internet Options, update your website and you can see the changes.