i have the following problem:

I made an Homepage Visualforce component to show some info to my customers.

<apex:page controller="UserApprovalProcessCtrl" showHeader="true" sidebar="true" >
<apex:pageBlock html-width="100%">
 my content

The problem i'm facing is the following:

if I set the attribute showHeader="true" on the apex:page element in my VF page the result is the following:


As you can see the component width is different from the others... If i set the attribute showHeader="false" the problem doesn't occur anymore. But i don't want to do that because i want my component to have the Home tab style.

Any idea how to resolve this?

2 Answers 2


there is a 10px margin applied to the page component via the standard style sheets class hasMotif (you can check this via your browser dev tools)

you can override it in your page.. something like below.

Note : overriding standard css might not be a proper or better way, thou it will get you the 100% width you wanted.. do it at your own risk

<apex:page showHeader="true" sidebar="true" >
margin : 0px;
<apex:pageBlock html-width="100%">
 my content
  • Thanks man, right now this is the best work-around i found on the net. I'll let you know if i'll be able to solve this in a proper way ;)
    – Marco
    May 8, 2015 at 8:05

showHeader and sideBar should be set to false. It works !


You must log in to answer this question.

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