4

I have a table that shows icons of account statuses - when I set the VFpage to showheader=false it changes how that table is displayed (this also happens when viewing on the force.com sites even with showheader=true) - see images - can someone help me understand why?

enter image description here

enter image description here

<apex:page StandardController="Account" extensions="ColumnControllerExt" tabstyle="account">
<head>
    <script type="text/javascript">
// Popup window code
function newPopup(url) {
    popupWindow = window.open(
        url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>

<style type="text/css">
#rowInfo,#rows{
        padding:5px;
    text-align:center;
    background-color:#f8f8f8;
    border:solid 2px #236fbd;
}
#rowInfo { 
    width:50px;
    display:bold; 
}
table
{
border-collapse:collapse;
table-layout: fixed;
}   
 </style>
    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
        }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    div#wrapperHeader div#header {
 width:1000px;
 height:200px;
 margin:0 auto;
}

div#wrapperHeader div#header img {
 width:; /* the width of the logo image */
 height:; /* the height of the logo image */
 margin:0 auto;
}
    </style>
    <div id="wrapperHeader">
 <div id="header">
  <img src="https://c.na13.content.force.com/servlet/servlet.ImageServer?id=015a0000002WenZ&oid=00D3000000003Hx&lastMod=1375828250000" alt="logo" />

    <center><font size="3"><a href="/apex/anyCustomerEmployeeTimeList">List View</a></font></center>
        </div> 
</div>
</head>
<body>

<table width="100%">
<tr>
<td width="80%" valign="top">
        <apex:outputPanel >
            <apex:form >
                <apex:actionFunction action="{!setHoveredAccount}" name="setDetailId" reRender="accountDetail" status="detailStatus">
                    <apex:param name="detailId" value="" assignTo="{!hoveredAccount}"/>
                </apex:actionFunction>
                <table>
                     <tr align="center">
                         <td><a href="JavaScript&colon;newPopup ('http://mc-www.mainman.dcs/dcs/main/index.cfm?event=showFile&ID=1D833C4A02E0D046BE&static=false');" ><img src="/img/icon/documents24.png" title="Key (WIG) RASCI"/></a></td>

                 <td><a href="#"><img src="/img/icon/documents24.png" title="Acitve Project RASCI"/></a></td>  
                     <td><a href="#"><img src="/img/icon/documents24.png" title="Active Opportunity > $50K RASCI"/></a></td>  
                         <td><a href="#"><img src="/img/icon/documents24.png" title="Partner-Managed RASCI"/></a></td>  
                             <td><a href="#"><img src="/img/icon/documents24.png" title="TAM-Managed RASCI"/></a></td> 
                                 <td><a href="#"><img src="/img/icon/documents24.png" title="TSE-Managed RASCI"/></a></td>  
                                     <td><a href="#"><img src="/img/icon/documents24.png" title="Inactive RASCI"/></a></td>  



                 </tr>

                  <tr>
                      <apex:repeat value="{!list_of_accountmanagement}" var="col_head">
                          <th id="rows">{!col_head}</th>
                      </apex:repeat></tr>
                  <tr>

                              <apex:repeat value="{!list_of_accountmanagement}" var="col_head">
                          <td id="rowInfo" border="0"> 

                              <apex:repeat value="{!map_values[col_head]}" var="col_val">
                                  <apex:outputLink value="/apex/anycustomeremployeetimedetail?id={!col_val.id}"
                                  onfocus="setDetailId('{!col_val.id}');" 
                                  onmouseover="setDetailId('{!col_val.id}');"
                                  onblur="setDetailId('');" 
                                  onmouseout="setDetailId('');">
                                      <apex:outputText value="{!col_val.overall_status__c}" escape="false"/>
                                  </apex:outputLink>             

                              </apex:repeat>
                          </td>
                      </apex:repeat>
                      </tr>
                  </table>
            </apex:form>
        </apex:outputPanel>
</td>
<td width="20%">
    <apex:actionStatus id="detailStatus">
        <apex:facet name="start">
            <div style="text-align:center;">
                <img src="/img/loading.gif" alt="Loading graphic" />&nbsp;<strong>Loading...</strong>
            </div>
        </apex:facet>
        <apex:facet name="stop">
            <apex:outputPanel id="accountDetail">
                <br/>
                <br/>
       <apex:form >


<apex:pageblock rendered="{!hoverAccount!=null}" > 
    <apex:pageblocksection columns="1" id="name">
        <apex:outputfield value="{!hoverAccount.name}"/> 
        <apex:outputfield value="{!hoverAccount.type}"/> 
        </apex:pageblocksection>
    <apex:pageblocksection columns="1" id="ka"> 
    <apex:repeat value="{!$ObjectType.Account.FieldSets.Overview}" var="ov"> 
    <apex:outputfield value="{!hoverAccount[ov]}"/> 
    </apex:repeat> </apex:pageblocksection> </apex:pageblock> 
              </apex:form> 
            </apex:outputPanel>
        </apex:facet>
    </apex:actionStatus>

</td>
</tr>
</table>
</body>
</apex:page>

2 Answers 2

4

When you have showheader="true" salesforce will apply a lot of their standard css to the page. There is probably some CSS in there that applies to all tables or tables inside apex:forms.

I would use a CSS inspector in your browser of choice (both firefox and chrome have one built-in) and see where the styles on your table and tablerows are coming from when showheader="true" and then just include those in your own css.

2
  • Rather than manually including the css, I would try using standardStyleSheets="true". Aug 8, 2013 at 5:14
  • @DanielHoechst The example code has standard tables rather than pageblock or datatables so it seems like the sf css is more of a side-effect. I would be really leery of things breaking in unexpected ways as the page is modified. Also, I don't believe that sites will include the same css even if you set standardstylesheets="true". Aug 8, 2013 at 17:23
0

In your <apex:page tag, add this property standardStylesheets="false". This will disable the standard CSS of the header when displayed.

1
  • Nothing seems to be working.. I wonder if I change it from a table to a pageblock if it would work... Aug 11, 2013 at 0:11

You must log in to answer this question.

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