0

I have tried moving around the panelgrid, panelgroup and repeat statements but I cannot get the panelgrid to show the records horizontally. Can anyone spot what I am missing?

<apex:page controller="controller_TrophyCase" sidebar="false">
    <apex:form id="theForm" style="">

        <div id="header">
            <b>Trophy Case for John Smith</b>
        </div>

        <div id="section">
            <apex:repeat value="{!TrophyList}" var="T">
                <apex:panelGrid columns="5" id="certGrid">
                    <apex:panelGroup>
                        <apex:outputField value="{!T.Trophy__c}"/><br />
                        <apex:outputlink target="_blank" value="/{!T.Id}">{!T.Name}</apex:outputlink><br />
                        <apex:outputField value="{!T.Your_Trophy__c}" />
                    </apex:panelGroup> 
                </apex:panelGrid>
            </apex:repeat>
        </div>

    </apex:form>
</apex:page>

Sample of what it is doing right now. These two records should be on the same row as I have columns set to 5.

enter image description here

0

apex:panelGrid and apex:repeat don't play well together:

Note that if an <apex:repeat> component is used within an <apex:panelGrid> component, all content generated by the <apex:repeat> component is placed in a single <apex:panelGrid> cell...

Instead, you'll want to use an alternative means of rendering, something like this:

<apex:repeat value="{!TrophyList}" var="T">
    <div style="display: inline-block; width: 19%">
            <apex:outputField value="{!T.Trophy__c}"/><br />
            <apex:outputlink target="_blank" value="/{!T.Id}">{!T.Name}</apex:outputlink><br />
            <apex:outputField value="{!T.Your_Trophy__c}" />
    </div>
</apex:repeat>

This will result in a CSS-based rendering of the elements.

Alternatively, you could use SLDS grid.

Or you could use a nested list:

<table>
    <tbody>
        <apex:repeat value="{!TrophyListRows}" var="row">
            <tr>
            <apex:repeat value="{!row}" var="T">
                <td width="*">
                    <apex:outputField value="{!T.Trophy__c}"/><br />
                    <apex:outputlink target="_blank" value="/{!T.Id}">{!T.Name}</apex:outputlink><br />
                    <apex:outputField value="{!T.Your_Trophy__c}" />
                </td>
            </apex:repeat>
            </tr>
        </apex:repeat>
    </tbody>
</table>
  • Thanks sfdcfox! I went the CSS route. I think it will actually make it easier for me overall with styling instead of the panelgrid approach. – Matt M Oct 16 '18 at 14:42

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.