Layout problem: dataTables in panelGrid

UI Components for JSF
Post Reply
User avatar
b4ckirc
Posts: 3
Joined: 27 Sep 2012, 12:48

27 Sep 2012, 14:57

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:

Code: Select all


<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

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

04 Oct 2012, 10:46

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 Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Sarath
Posts: 1
Joined: 15 Jun 2013, 22:48

15 Jun 2013, 23:00

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>

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 24 guests