0

So I have three tables, side-by-side, in a panel grid (columns=3). The first two are aligned perfectly. The third is horizontally aligned... but vertically, it's at the bottom. See pic.

Vertical-align:top, does nothing, and tried many things. Only :margin-top:-100px works to move it up. What am I doing wrong?

enter image description here

<apex:pageblocksection columns="1" >
     <apex:panelGrid columns="3" border="0" width="100%" >
          <table style="width:33.3%; float:left">
           </table>

           <table style="width:33.3%; float:none">
           </table>

           <table style="width:33.3%;  float:right; ">
           </table>

       </apex:panelGrid>    
</apex:pageblocksection>

2 Answers 2

2

Just Put a wrapper <apex:outputPanel > around <table tag and it will do the trick.

VF Page

<apex:page showHeader="true" sidebar="true">
    <apex:panelGrid columns="3" border="0" width="100%">
        <apex:outputPanel >
            <table style="width:100%;height:100px;" border="1"></table>
        </apex:outputPanel>
        <apex:outputPanel >
            <table style="width:100%;height:100px;" border="1"></table>
        </apex:outputPanel>
        <apex:outputPanel >
            <table style="width:100%;height:100px;" border="1"></table>
        </apex:outputPanel>
    </apex:panelGrid>
</apex:page>

Actually You can analyze the issue when you see the output HTML. Without <apex:outputPanel > it puts all 3 tables in one column rather in 3 different columns. Salesforce couldn't distinguish between 3 html tables as different elements. That's why you did not get the desired result.

With <apex:outputPanel > tag

<table border="0" width="100%">
   <tbody>
      <tr>
         <td>
            <span id="j_id0:j_id2">
               <table border="1" style="width:100%;height:100px;"></table>
            </span>
         </td>
         <td>
            <span id="j_id0:j_id4">
               <table border="1" style="width:100%;height:100px;"></table>
            </span>
         </td>
         <td>
            <span id="j_id0:j_id6">
               <table border="1" style="width:100%;height:100px;"></table>
            </span>
         </td>
      </tr>
   </tbody>
</table>

Without <apex:outputPanel > tag

<table border="0" width="100%">
   <tbody>
      <tr>
         <td>
            <table border="1" style="width:33.3%;height:100px;"></table>
            <table border="1" style="width:33.3%;height:100px;"></table>
            <table border="1" style="width:33.3%;height:100px;"></table>
         </td>
      </tr>
   </tbody>
</table>

Output

enter image description here

0
2

The problem has to do with CSS float; since the "none" is in the middle, it forces the right box down. I would advise against using an apex:panelGrid for this purpose anyways, since that element is really for laying out managed elements (e.g. other items with the namespace of apex), not arbitrary HTML. You should just save yourself the trouble and use a normal table or even a div wrapper:

<style>
.threeColumnGrid > .cell {
    display: inline-block;
    width: 32%;
    vertical-align: text-top;
}
<style>

<div class="threeColumnGrid">
    <div class="cell"><table>...</table></div>
    <div class="cell"><table>...</table></div>
    <div class="cell"><table>...</table></div>
</div>
1
  • Thanks for this! I can't choose two answers, but the first response will be able to help others in my situation, and hopefully they read your Proper fix. I'm going to follow your advice and not use panel grid and move it over to your method. Thanks again sfdcfox!
    – RC82
    Commented Sep 9, 2015 at 15:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .