Homepage Visualforce Component - Adjusting Width

Question

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
</apex:pageBlock>

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?

Answer 1

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" >
<style>
.hasMotif
{
margin : 0px;
}
</style>
<apex:pageBlock html-width="100%">
 my content
</apex:pageBlock>
</apex:page>

Answer 2

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