function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
davehart55davehart55 

Vertical align in panelGrid

Any idea why I can't get vertical alignment to work in a panelGrid?

 

I'm just trying to draw a simple table with two rows.

Each row has a (different) command button, the word "Status:", and then the actual status which is a dynamic string (the result from running the command).

The command button is taller than the text items, so I would like the text to v-align in the middle of it. What have I done wrong?

[This is just a fragment, and the functionality works fine, it just looks poor.]

 

<apex:panelGrid columns="3" id="theGrid" style="vertical-align:middle">
  <apex:commandButton value="Fetch something" action="{!fetch}" status="fetchStatus"
    reRender="theTable,fetchStatus"/>Status:
  <apex:actionStatus startText="Working..." stopText="{!fetchStatus}" id="fetchStatus"/>
  <apex:commandButton value="Create something" action="{!create}" status="createStatus"
  reRender="theTable,createStatus"/>Status:
  <apex:actionStatus startText="Working..." stopText="{!createStatus}" id="createStatus"/>
</apex:panelGrid>

 

Karthikeyan JayabalKarthikeyan Jayabal

I had faced this before & below is the fix (not the best one, though):

 

<apex:outputPanel id="oPanel" style="height:5em;">
    <apex:panelGrid columns="3" style="line-height:2.2em">
        <apex:commandButton value="Refresh" status="aStatus" reRender="oPanel"/>
        <apex:outputText value="Status: "/>
        <apex:actionStatus id="aStatus" startText="Refreshing..."/>
        <apex:commandButton value="Query" status="qStatus" reRender="oPanel"/>
        <apex:outputText value="Status: "/>
        <apex:actionStatus id="qStatus" startText="Querying..."/>
    </apex:panelGrid>
</apex:outputPanel>

 Got this idea from this blog: http://phrogz.net/css/vertical-align/