Board index JavaServer Faces Themes Layout problem: dataTables in panelGrid

Layout problem: dataTables in panelGrid

Theme Framework


Posts: 3
Hi! :D

I've a layout problem.
I have to show a lot of big dataTables in a page. I want show these dataTables in a dataGrid, 2 for each row, and I want that each column cover only the 50% of width.
Each dataTable is wrapped inside a panel. I want that users have to use a scrollbar to see all the dataTable data.

I want a template like this:

Image

The problem is that I'm not able to limit the size of the dataTable and of the column that don't respect the limit of 50% width of the page.

This is my code:


<p:panelGrid style="height:auto; border:1px">
      <p:row >
      <p:column style="width:50%">
      
      <p:panel header="PanelB1" toggleable="true" style="height:auto; position:upper;">
      <p:scrollPanel>

         <---- My Big dataTable here ---->

      </p:scrollPanel>
      </p:panel>

      </p:column>
      
      
      <p:column style="width:50%">
      
      <p:panel header="PanelB2" toggleable="true" style=" height:auto;">
         
         <p:scrollPanel>

         <---- My Big dataTable here ---->

            </p:scrollPanel>
            
      </p:panel>
</p:column>
      </p:row >
</p:panelGrid>



Can you help me with this problem? :roll:

Thank you very much!! :D

Oleg User avatar
Expert Member

Posts: 3663
Location: Russia, Siberia => Germany, Black Forest
You can place your tables within DIV elements which have CSS property overflow:auto. The problem is only how to build two columns with 50%. There are a lot of examples in internet how to do this.

By the way, this layout will be possible with new compoment pe:fluidGrid in PrimeFaces Extensions, but there is a long way to the new release. This month I have to complete my book, next month the work on the new component can be started.
PrimeFaces 4.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Kubuntu 12.04, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 1
I solved this problem recently using code below:(I am not using p:scrollPanel in the below example)
CSS:
===

.borderlessFullWidthPanelGrid tr {
border: none;
COLOR: #3e7ab6;
width: 100%;
}

.borderlessHalfWidthColumn td {
border: none;
COLOR: #3e7ab6;
width: 50%;
}

XHTML content:
==========

<p:panelGrid styleClass="borderlessFullWidthPanelGrid borderlessHalfWidthColumn">

<p:row>
<p:column>

<div style="overflow: auto">
<p:dataTable tableStyle="width: 100%"

...
</div>
</p:column>

<p:column>

<div style="overflow: auto">
<p:dataTable tableStyle="width: 100%"

...
</div>
</p:column>
</p:panelGrid>


Return to Themes