You need to sign in to do that
Don't have an account?
TehNrd
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
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>
All Answers
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>
This is fantastic! Have been really struggling with this - your solution worked a treat. Thanks a lot! :smileyvery-happy:
Dan
I realize this is an old post but it doesn't seem to work anymore. Any ideas?
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.