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: 3696
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, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, 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