+ Start a Discussion
robertcw777robertcw777 

Visualforce Page extends past page heading

I am putting out a table with variable columns, so I need to do in html. When the table is rendered, it extends past the edge of the salesforce header. I've tried to adjust the column width in the <th> row by setting each column to 10% but can't seem to adjust any column widths. What is causing the table to go beyond the right margin of the header and how can I adjust it? Any help much appreciated.

Below is the VF, and the class definitions for the row wrapper follows that.

<apex:form >
  <apex:pageBlock id="budget">

      <apex:panelGrid columns="4" cellSpacing="10px">
         <apex:selectList label="Competency Owner" value="{!selectedCompetencyOwner}" size="1">
             <apex:selectOptions value="{!Owners}"/>
         </apex:selectList>
         <apex:commandButton value="Update" rerender="practices,budget"/>
         <apex:commandButton value="Resource Level" />
         <apex:commandButton value="Save"/>       
       </apex:panelGrid>

  <table class="list" border="0" cellpadding="0" cellspacing="0">
    <tr class="headerRow  ">
      <apex:repeat value="{!Headings.cellList}" var="h">
        <th width="10%">
           {!h.value}
        </th>
      </apex:repeat>
    </tr>

     <tr>
        <td align="right">
            {!InputLabel}
        </td>
       
         <apex:repeat value="{!inputRow.cellList}" var="i">        
            <td>
               <input type="text" value="{!i.value}" align="right"/>
           </td>
         </apex:repeat>
      
      </tr> 

   <apex:repeat value="{!Rows}" var="row">
       <tr>
         <apex:repeat value="{!row.cellList}" var="c">        
           <td align="right">
               {!c.value}
           </td>
         </apex:repeat>
       </tr>
    </apex:repeat>

  </table>
  </apex:pageBlock>
</apex:form>
</apex:page>

Row wrapper:

public class rowWrapper {
    public List<Cell> CellList{get;set;}
}


public class Cell {
    public String Value{get;set;}
    }
bob_buzzardbob_buzzard
Try setting the width of the table to 100% - this should make it the same size as the outer containing pageblock:

<table class="list" border="0" cellpadding="0" cellspacing="0" style="width:100%">
robertcw777robertcw777
Thanks, but that didn't do it. Same problem. Here is html for table if that helps.
3Q14 4Q14 1Q15 2Q15 3Q15 4Q15 1Q16 2Q16
Target FTE
Allocated 0 0 0 0 0 0 0 0
Under/(Over) 0 0 0 0 0 0 0 0