I have a list of a custom obj records containing data and image url. I am passing this list to an apex repeat on the visualforce page and want to display those records in a grid layout as shown in the image below. Three blocks on each row, each block showing the image on the left and the data on the right.

enter image description here

The part I have got working is showing the individual blocks with image and data. The part I need help with the showing these blocks as grid layout (as above).

Now I tried putting the apex repeat inside a panelGrid but it only filled one column with the data.

Here is the code I am using inside repeat

        <apex:repeat value="{!mylist}" var="obj">
            <apex:outputPanel id="blockViewPanel" styleClass="blockView">
                <apex:panelGrid columns="2">
                    <apex:image url="{!obj.imageUrl}" styleClass="imageStyle"/>
                    <apex:panelGroup styleClass="dataStlye">
                        <apex:outputText value="{!obj.some_field1__c}"/><br/>
                        <apex:outputText value="{!obj.some_field2__c}"/><br/>

Can you suggest any other solution to show a grid view on the vf page? I am willing to explore CSS or JavaScript if native Visualforce solution does not work.


Something like this? I've been playing around with this learning more about remote objects. This particular example is done with Bootstrap, and I'm quickly becoming a large fan as we are moving a lot of our internal stuff to Bootstrappy goodies.

If you create your Bootstrap container and row right outside your content area in your page <div class="container-fluid"><div class="row"></div></div>, this should be able to be accomplished by passing through class="col-xs-6 col-sm-4"(or whichever column style works best for you) in that repeat using HTML Passthrough. I havent personally tried to do this within a repeat with a panelgrid but I think it should work. If you go down the Bootstrap route, their CSS help page is amazing and the section on grids can help when figuring out the different classes for that grid layout you are looking for. enter image description here

  • Thanks, your solution worked. I am still having trouble displaying the image and the data side-by-side. The data moves under the image. – codeinprogress Nov 3 '14 at 16:15
  • I'm curious how this looks. Can you post a screenshot of that? I'm wondering if you just need to try different grid styles. – cricketlang Nov 3 '14 at 16:23
  • I solved that issue yesterday. I had to change the way image and data are placed near each other. – codeinprogress Nov 4 '14 at 16:42
  • <apex:outputPanel styleClass="container-fluid"><div class="row"><apex:repeat value= var=> <apex:panelGrid styleClass="col-xs-6 col-md-4" columns="2"><apex:image/><apex:outputpanel>data</apex:outputpanel></apex:panelGrid></apex:repeat></div></apex:outputPanel> – codeinprogress Nov 4 '14 at 16:46
  • Nice! Glad to know this works with the panelgrid inside a repeat! – cricketlang Nov 4 '14 at 21:05

You could try masonryjs. It lets you use something similar to the Pinterest layout. Should not be terribly difficult to adapt to using for your use case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.