0

I have a visualforce page that I am embedding directly inside the standard page layout for the Products object. I am trying to make it look and feel like a native widget. I followed the suggestion here to do that: https://salesforce.stackexchange.com/a/45610/49567

However, I'm having a bit of an issue: The width of the columns in the widget is not consistent with that of the standard field labels/values on the page.

If I resize the browser window, they become misaligned. Here is some screenshots illustrating this undesirable behavior ("product image" is the custom VF widget, "product description" is a standard field in the native layout):

Alignment when browser is sized just right (how I want it to look): correct alignment when the browser is sized just right

Alignment when browser width is reduced slightly (not good)

incorrect alignment when browser width is reduced

Alignment when browser width is reduced even more (even worse)

alignment progressively grows worse as width is reduced further

Here is my Visualforce code (irrelevant parts truncated for brevity):

<apex:page standardController="Product2" extensions="ProductPhotosExtension">
    <apex:form id="photoUploaderForm">
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="2">
                <apex:pageBlockSectionItem labelStyle="display:none;" dataStyle="display:none;">
                    <apex:outputText>&nbsp;</apex:outputText>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Product Image" for="fileImageId"/>
                    <apex:inputFile id="fileImageId" value="{!fileBody}"
                                    filename="{!fileName}" onchange="uploadFile(event);"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:actionFunction name="callUploadMethod" action="{!upload}"/>      
    </apex:form>
</apex:page>

NOTE: I have the VF widget set to 100% width and 50 pixel height

  • 1
    Consider using columns="1" since you're not actually using a second column. – sfdcfox Oct 3 '17 at 18:56
  • I tried that, but that actually causes even worse alignment issues. That is why I was using 2 as suggested in the answer I linked in my post. For reference, here's what it looks like if I set the columns attribute to 1: imgur.com/FPXQ17V – ag415 Oct 3 '17 at 22:24
  • 1
    Well, it depends on how small you're making the window. The style sheets of classic are not "responsive", so they don't react well to limited space. You might consider using SLDS, so you'll at least get a consistent look. – sfdcfox Oct 3 '17 at 22:31
  • Would using SLDS require switching my org to the "Lightning Experience"? Management doesn't really like it (and I can't say I really do either) so I don't really think that would be a viable option. Is there no other way to get the embedded VF page alignment consistent with the rest of the fields on the page? I think I understand why this is happening, since <apex:pageBlock mode="maindetail"> is basically meant to behave like the standard detail page. It's designed for a full page rather than an embedded widget, so it scales as the width of the widget is the width of the entire page – ag415 Oct 3 '17 at 22:33
  • 1
    It's just that the standard classic style sheets assume you have a minimum resolution (see this topic), so if you go much below that, you get odd behavior. I don't think there's an easy fix for this. – sfdcfox Oct 3 '17 at 22:53
0

So I've come up with a pretty ugly hack to (kind-of) fix this. I cannot stress enough, however, that this is a seriously ugly hack and it still isn't perfect as the elements aren't going to be perfectly aligned at certain window sizes (unless you add a crapton more media queries)

Some web developers may find the following code disturbing. Viewer discretion is advised.

CSS static resource file (photouploaderstyles):

.photoUploaderForm {
    width: 94%; 
    margin-left: 17%;
    position: fixed;
    overflow: hidden;
}

@media (max-width: 563px) {
    .photoUploaderForm {
        width: 155%;
        margin-left: 4%;
    }
}

Visualforce code:

<apex:page standardController="Product2" extensions="ProductPhotosExtension">
    <apex:stylesheet value="{!$Resource.photouploaderstyles}"/>
    <apex:form id="photoUploaderForm" styleClass="photoUploaderForm">
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value="Product Image" for="fileImageId"/>
                    <apex:inputFile id="fileImageId" value="{!fileBody}"
                                    filename="{!fileName}" onchange="uploadFile(event);"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:actionFunction name="callUploadMethod" action="{!upload}"/>      
    </apex:form>
</apex:page>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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