0

I have conditional rendering set up for a PageBlockSectionItem field and it seems like this field does not align properly with the rest of the fields in this same section - see below. Is it possible to apply formatting to align the field label and picklist input "Match Partner - Existing" with the other fields in the section?

VF Page Alignment

<!-- Start Match Partner Rendering -->
<apex:pageblockSection title="Request Details" collapsible="true" columns="1" id="pbs1">
    <apex:inputField value="{!PartnershipRequest__c.AdditionalInformationQuestions__c}"/>
    <apex:pageblockSectionItem >
        <apex:outputLabel >Match Partner</apex:outputLabel>
        <apex:actionRegion >
            <apex:inputField value="{!PartnershipRequest__c.MatchPartner__c}" label="Match Partner">
                <apex:actionSupport event="onchange" action="{!null}" rerender="op1,op3"/>
            </apex:inputField>
        </apex:actionRegion>
    </apex:pageblockSectionItem>
    <apex:outputPanel id="op1">
        <apex:outputPanel rendered="{!PartnershipRequest__c.MatchPartner__c == 'Existing Partner'}" id="op2">
            <apex:pageblockSection >
                <apex:inputField value="{!PartnershipRequest__c.MatchPartnerExisting__c}" />
            </apex:pageblockSection>
        </apex:outputPanel>
    </apex:outputPanel>
    <apex:outputPanel id="op3">
        <apex:outputPanel rendered="{!PartnershipRequest__c.MatchPartner__c == 'New Partner'}" id="op4">
            <apex:pageblockSection >
                <apex:inputField value="{!PartnershipRequest__c.MatchPartnerNew__c}" />
            </apex:pageblockSection>
        </apex:outputPanel>
    </apex:outputPanel><br />
</apex:pageblockSection>
<!-- End Match Partner Rendering -->
Improve this question
1
  • try to indent your code so that it can be readable.
    – Santanu Boral
    Commented Dec 30, 2018 at 16:17

2 Answers 2

Reset to default
1

The issue is that you're nesting <apex:pageBlockSection> components inside one another. Both of the page block sections that you conditionally render inside <apex:outputPanel> are nested inside the top level page block section, whose title is "Request Details".

If we take out the output panels and other support structures just to show the skeleton of what you have here, it's

<apex:pageblockSection title="Request Details" collapsible="true" columns="1" id="pbs1">
    <apex:inputField value="{!PartnershipRequest__c.AdditionalInformationQuestions__c}"/>
    <apex:pageblockSectionItem >
        <apex:inputField value="{!PartnershipRequest__c.MatchPartner__c}" label="Match Partner">
    </apex:pageblockSectionItem>
    <apex:pageblockSection >
        <apex:inputField value="{!PartnershipRequest__c.MatchPartnerExisting__c}" />
    </apex:pageblockSection>
    <apex:pageblockSection >
        <apex:inputField value="{!PartnershipRequest__c.MatchPartnerNew__c}" />
    </apex:pageblockSection>
</apex:pageblockSection>

See how you've got page block sections alongside a page block section item and an unwrapped input field? Those inner sections' child components are the ones that are misaligned.

You don't actually need a wrapper component around each item in a section as you've structured your page, but if you use one, it should be <apex:pageBlockSectionItem> rather than <apex:pageBlockSection>. As Santanu noted, you also don't need to add an output panel just to target it for rendering or rerendering, although I don't think it causes you any harm to do so in this situation (an output panel is just a <div>).

Improve this answer
1
  • Thanks for your response David, after I removed the additional elements, the fields are now properly aligned!
    – FWSFDC
    Commented Dec 30, 2018 at 17:49
1

You don't need to use apex:outputPanel for rerendering. Use apex:pageBlockSection for that as follows. Just to let you know, below is not a full code, it is a guidance only.

<apex:pageblockSection title="Request Details" collapsible="true" columns="1" id="pbs1">
    <apex:inputField value="{!PartnershipRequest__c.AdditionalInformationQuestions__c}"/>
    <apex:pageblockSectionItem >
        <apex:outputLabel >Match Partner</apex:outputLabel>
        <apex:actionRegion >
            <apex:inputField value="{!PartnershipRequest__c.MatchPartner__c}" label="Match Partner">
                <apex:actionSupport event="onchange" action="{!null}" rerender="op1,op3"/>
            </apex:inputField>
        </apex:actionRegion>
    </apex:pageblockSectionItem>

<apex:pageBlockSection id="op1" columns="1" >
    <apex:pageBlockSectionItem rendered="{!PartnershipRequest__c.MatchPartner__c == 'Existing Partner'}">                       
        <apex:outputLabel > Match Partner (Existing)</apex:outputLabel>
        <apex:actionRegion >
            <apex:inputField value="{!PartnershipRequest__c.MatchPartnerExisting__c}" label="Match Partner (Existing)"/>
        </apex:actionRegion> 
    </apex:pageBlockSectionItem>
</apex:pageBlockSection>
Improve this answer
1
  • Thanks for the suggestion Santanu. I've converted my apex:outputPanels to apex:pageBlockSection, however the field is still not aligning properly. Is this a limitation of visualforce/rendering?
    – FWSFDC
    Commented Dec 30, 2018 at 16:44

You must log in to answer this question.

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