Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I have a standard Account detailpage, where I want to add a small VisualForce part in a column on that page. So I created a VF page that looks like this

<apex:page standardController="Account" extensions="QuickRoleOverviewController">
    <apex:form >
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem helpText="...">
                    <apex:outputLabel value="Primary Contact"/>
                    <apex:outputText>...</apex:outputText>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

But that doesn't look right. The text is too much to the left and not at all aligned with the other 'normal' edit fields on the page.

VF is not aligned with the rest of the page

Can somebody help me fix that?

share|improve this question

3 Answers 3

I've not had much luck with inline VF pages sitting in a single column. As I read your question, it occurs to me that the apex:pageBlock tag is really meant to recreate the entire width of the page layout, and not granular enough to stick in a single column.

By setting width to 1 column, you are telling the pageBlock to span both page layout columns. You then stuff that into a single column, you are going to end up with a distorted look as you have discovered.

If you could apply this as a new section underneath, two columns, with no header visible, you will probably get the look you want.

I think if you had to absolutely had to have just this field in this spot, you might be stuck recreating the HTML manually with or apex:outputPanel tags, then reverse engineer the styles. But this strategy is much more fragile, as we do not guarantee our styles will not change.

share|improve this answer
    
Thanks! Good to see confirmed that a pageBlock is meant to span two columns. Too bad there's no option for 1 column, but I guess I should just deal with that for now :-) –  Willem Mulder Jul 31 at 10:03

If it's only about the column-width you can adapt the CSS of the label with. In HTML which is generated by Saleforce, it is a <table>, so you can adjust the column's width. I did this once like that

<style>
    .bPageBlock .detailList .labelCol { width: 1%; min-width:180px; }
    .bPageBlock .detailList .data2Col { width: 99%; }
</style>

My idea was to use a default width to match for both, single and double columns. Sure not perfect, but looked OK for my requirements. Please mind @peter 's remark that interacting with the underlying HTML is not best practice and may break at some point in the future. Due to my experiences it happens rarely, and if, it's easy to fix again. Also it degrades gracefully, since the whole thing is only cosmetic.

To reuse the standard parts you can use <apex:detail>:

<apex:page standardController="Account">
   <apex:detail subject="{!account.ownerId}" relatedList="false" title="false"/> 
</apex:page>

Please have a look at https://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_detail.htm

share|improve this answer
    
Thanks! Still, as you mentioned, classnames and HTML can change, so I don't really like relying on them. But manually adjusting the look and feel is apparently necessary to get what we want. See my answer how I solved it in the end. Thanks again. –  Willem Mulder Jul 31 at 10:08
up vote 1 down vote accepted

Taking into account what @Peter said, my idea now is to let pageBlock span 2 columns, but hide the right two cells so that it will in effect act as one column.

Without relying on class-names, I now have this and looks good enough:

<apex:page standardController="Account" extensions="QuickRoleOverviewController">
    <apex:form >
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="2">
                <apex:pageBlockSectionItem helpText="...">
                    <apex:outputLabel value="Primary Contact"/>
                    <apex:outputText>...</apex:outputText>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem labelStyle="display:none;" dataStyle="display:none;">
                    <apex:outputText >&nbsp;</apex:outputText>
                    <apex:outputText >&nbsp;</apex:outputText>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.