+ Start a Discussion
TehNrdTehNrd 

How to use panelGrid and repeat to place list of objects in a grid.

I am struggling with this one. To keep this very simple lets say I have a List of strings. The length of this List is dynamic and can change. I would like to place this in a grid or table with four rows and basically fill the table left to right, top to bottom.

Lets say my list has 5 values. I want it to render like this:

[1][2][3][4]
[5]

if it has 10:

[1][2][3][4]
[5][6][7][8]
[9][10]

If it has 3:
[1][2][3]

This seems like it should be very simple but I can't figure this one out.

 

Thanks,

Jason

 

Message Edited by TehNrd on 10-23-2009 01:35 PM
Best Answer chosen by Admin (Salesforce Developers) 
TehNrdTehNrd

BA BAM!

A little css trickery did the trick. In my repeat I created a div with a width of 25%, and float them to the left. This will essentially create a dynamic grid with content that populates from left to right, top to bottom.

 

 

<apex:pageBlock title="Category Subscriptions">
<apex:pageBlockSection columns="1">
<apex:repeat value="{!categories}" var="c">
<apex:outputPanel layout="block" style="width: 25%; float: left;">
<apex:panelGrid columns="2">
<apex:inputCheckbox value="{!c.Selected}"/>
<apex:outputText value="{!c.category}"/>
</apex:panelGrid>
</apex:outputPanel>
</apex:repeat>
</apex:pageBlockSection>
</apex:pageBlock>

 

Message Edited by TehNrd on 10-26-2009 09:07 AM

All Answers

TehNrdTehNrd

BA BAM!

A little css trickery did the trick. In my repeat I created a div with a width of 25%, and float them to the left. This will essentially create a dynamic grid with content that populates from left to right, top to bottom.

 

 

<apex:pageBlock title="Category Subscriptions">
<apex:pageBlockSection columns="1">
<apex:repeat value="{!categories}" var="c">
<apex:outputPanel layout="block" style="width: 25%; float: left;">
<apex:panelGrid columns="2">
<apex:inputCheckbox value="{!c.Selected}"/>
<apex:outputText value="{!c.category}"/>
</apex:panelGrid>
</apex:outputPanel>
</apex:repeat>
</apex:pageBlockSection>
</apex:pageBlock>

 

Message Edited by TehNrd on 10-26-2009 09:07 AM
This was selected as the best answer
danwilkiedanwilkie

This is fantastic! Have been really struggling with this - your solution worked a treat. Thanks a lot! :smileyvery-happy:

 

Dan

turbo2ohturbo2oh

I realize this is an old post but it doesn't seem to work anymore. Any ideas? 

turbo2ohturbo2oh

For anyone interested if you aren't able to get the above solution to work. The alternative I used was to show everything in a list and display the LI's inline and set a width on the UL.