Question

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>

Answer 1

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;

height: 50px;

height: 10px;

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.