JSF table style question
Hello all,
Suppose I have two separate datatables in one page. How can I make it so that both tables are aligned (i.e, one on the left and one on the right). I tried doing this with
<hx:panelLayout>
<f:facet name="left">
// Code for Table 1
</facet>
<f:facet name="right">
// Code for Table 2
</facet>
</hx:panelLayout>
This achieved both datatables being in the same row, but Table 1 is larger than Table 2.
Therefore, Table 1 is vertically aligned on Top, but Table 2 is somehow aligned with the middle of Table1, not vertically aligned.
I am trying to vertically align Table1 and Table 2 but dont know how to do it. (Tried putting this in the dataTable style sheet). This didn't work.
.dataTable{
vertical-align: top;
}
Anybody have any clues?
Thanks.
Nope, using div didn't work (or maybe I didnt do it right). Table 1 and 2 are still not vertically aligned
<hx:panelLayout>
<f:facet name="left">
<div style="vertical-align: top">
<h:dataTable >
// Code for Table 1
</h:dataTable>
</div>
</facet>
<f:facet name="right">
<div style="vertical-align: top">
<h:dataTable >
// Code for Table 2
</h:dataTable>
</div>
</facet>
</hx:panelLayout>
You didn't do right...
Use this library, so you can use Div
http://www.jsftutorials.net/htmLib/
If you don't want to use the library, then you must surrond the div tag between <f:verbatim> tags
It's easier to use the library, because you have this done for you and many other Html tags encapsulated already.
Hmm, Will this work with dataTables? enclosed the verbatim tags, but my data in my dataTable disappeared. I didnt try the htmlLib yet.<f:verbatim><div><h:dataTable></h:dataTable></div></f:verbatim>
so, what solution did you chose?htmlib, html-div or css? would prefer the css way.btw, there is a myfaces-tomahawk implementation of the div container:<t:div>
I have the same problem and would like to know how you finally did it.
I tried the myfaces/tomahawk DIV implementation and div enclosed in verbatim -tags but it just won't work.
My example is a bit more complicated as I am using tiles. Is that a known problem?
.alignTop{
vertical-align: top;
}
<t:panelGrid id="leftMenuAndContentGrid" columns="2" cellpadding="5">
<t:div styleClass="alignTop">
<t:panelGroup id="leftMenuGrid" >
<tiles:insert definition="page.leftMenu" flush="false">
<tiles:put name="itemType" value="/jsp/itemType.jsp" type="page"/>
<tiles:put name="genres" value="/jsp/genres.jsp" type="page"/>
</tiles:insert>
</t:panelGroup>
</t:div>
<t:div styleClass="alignTop">
<t:panelGroup id="contentGrid" >
<tiles:insert name="content" value="/jsp/content.jsp" type="page"/>
</t:panelGroup>
</t:div>
</t:panelGrid>
The content page has a dataTable as well as the genre page. Depending on the size either one of the panelgroups is top-aligned the other one is aligned with the middle.
To get a certain layout I use more dataGrids in those 3 pages like this:
<h:panelGrid styleClass="header">
<h:outputText .../>
</h:panelGrid>
<h:panelGrid styleClass="body">
<h:dataTable.../>
</h:panelGrid>
I don't think they have to be vertical-aligned which I already tried out.
Any ideas?
Message was edited by:
anakin
