1

This is the result I want and accomplished, the space I put between the commandLinks in particular:

enter image description here

But I went about it, surely incorrectly, by adding a bunch of empty outputLabels between them:

<apex:panelGrid columns="38">
     <apex:commandLink action="{!showApp1Incompletes}" value="Show Incomplete Customers" id="showCommandLink" rerender="app1" status="gettingIncompletes1"/>
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel> 
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel>
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel>
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel>
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel> 
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel> 
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel>
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel>
     <apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel><apex:outputLabel value=" "></apex:outputLabel>
     <apex:commandLink action="{!hideApp1Incompletes}" value="Hide Incomplete Customers" id="hideCommandLink" rerender="app1" status="hidingIncompletes1"/>
 </apex:panelGrid>

I'd be really surprised if there isn't a more intelligent way to do this. So, how?

Also, I'm assuming in the first place that a panelGrid is a good way to put the commandLinks next to each other in this scenario. Maybe that's not the best either.

1 Answer 1

2

An apex:panelGrid is just a normal HTML table, so you can control it in a similar fashion to an HTML table. Here's one possible way:

<style>
  .rightAlign {
    text-align: right;
  }
</style>
<apex:panelGrid columns="2" width="100%" columnClasses="leftAlign,rightAlign">
  <apex:commandLink action="{!showApp1Incompletes}" value="Show Incomplete Customers" id="showCommandLink" rerender="app1" status="gettingIncompletes1"/>
  <apex:commandLink action="{!hideApp1Incompletes}" value="Hide Incomplete Customers" id="hideCommandLink" rerender="app1" status="hidingIncompletes1"/>
</apex:panelGrid>

Note the use of width and columnClasses to give us a table that spans the entire area, with two cells, the second cell being right-aligned. Other ways are possible as well.

However, unless you have some reason why you need the apex:panelGrid, I'd go with just using some simple CSS and skip using the component. Using apex:* components consumes view state, which is a fairly precious resource in Visualforce.

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.