Wrapping column text in an apex panel grid so that the table width remains fixed

Question

<apex:panelGrid columns="4" width="100%" columnClasses="random" >
<apex:repeat value="{!ProcessCellValuesWithoutName}" var="strCellValue">

<apex:outputLabel rendered="{!(!strCellValue.renderLink)}">{!strCellValue.recValues}</apex:outputLabel>
<apex:outputLabel rendered="{!(!strCellValue.renderLink)}">&nbsp;&nbsp;&nbsp;</apex:outputLabel>

</apex:repeat>
</apex:panelGrid>

I have tried adding style class to outputlabel and use the css properties like word-break:break-word/break-all , but that does not seem to wrap the column text when its too long to the next line and maintain the table width.

Answer 1

You'll need to put the labels inside an apex:outputPanel in order to render the cells needed for proper wrapping to take place.

<apex:panelGrid columns="4" width="100%" columnClasses="random">
    <apex:repeat value="{!ProcessCellValuesWithoutName}" var="strCellValue">

        <apex:outputPanel rendered="{!(!strCellValue.renderLink)}">
            {!strCellValue.recValues}
        </apex:outputPanel>
        <apex:outputPanel rendered="{!(!strCellValue.renderLink)}">
            &nbsp;&nbsp;&nbsp;
        </apex:outputPanel>

    </apex:repeat>
</apex:panelGrid>

This is because labels are inline elements, but you need tr and td elements for the table to render properly. If you need additional formatting, do so inside the apex:outputPanel elements.