Adding Space Between Side-by-Side commanLinks in a PanelGrid

Question

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

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.

Answer 1

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.