Layout issue with reRender inputfield on Visualforce page

Question

As per this blog by Bob Buzzard I am trying to rerender an input field. But as I am adding that input field in two nested output panel as shown in below code and example in the above blog that input field goes off from the layout of screen. I have attached the screen shot of that too.

`<apex:pageBlock id="pb" title="Action Edit" mode="edit" >

            <apex:pageBlockButtons >
                <apex:commandButton action="{!Save}" value="Save"/>
                <apex:commandButton action="{!Cancel}" value="Cancel"/>

            </apex:pageBlockButtons>  

            <apex:pageBlockSection title="Variables" id="Variables" columns="1">                 
                <apex:pageblockSectionItem >
                    <apex:outputLabel value="Greeting" for="OppLetterGreeting"/>
                    <apex:inputField value="{!opp.Greeting__c}" id="OppLetterGreeting"/>
                </apex:pageblockSectionItem>
                <apex:outputPanel>
                    <apex:outputPanel>
                        <apex:pageblockSectionItem >
                            <apex:outputLabel value="Return Date" for="ReturnDate"/>
                            <apex:inputField value="{!opp.Letter_Return_Date__c}" id="ReturnDate"/>
                        </apex:pageblockSectionItem>
                    </apex:outputPanel>
                </apex:outputPanel>
                <apex:pageblockSectionItem >
                    <apex:outputLabel value="Admin Name" for="OppLetterFromTitle"/>
                    <apex:inputField value="{!opp.Admin_Name__c}" id="OppLetterFromTitle"/>
                </apex:pageblockSectionItem>


            </apex:pageBlockSection>

        </apex:pageBlock>`

Answer 1

The apex:outputPanel is messing up your output, as it causes all of its children to be rendered in the same column (it's intended to group together elements inside an apex:panelGrid).

        <apex:pageBlockSection title="Variables" id="Variables" columns="1">                 
            <apex:pageblockSectionItem >
                <apex:outputLabel value="Greeting" for="OppLetterGreeting"/>
                <apex:inputField value="{!opp.Greeting__c}" id="OppLetterGreeting"/>
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
                <apex:outputLabel value="Return Date" for="ReturnDate"/>
                <apex:inputField value="{!opp.Letter_Return_Date__c}" id="ReturnDate"/>
                    </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
                <apex:outputLabel value="Admin Name" for="OppLetterFromTitle"/>
                <apex:inputField value="{!opp.Admin_Name__c}" id="OppLetterFromTitle"/>
            </apex:pageblockSectionItem>
        </apex:pageBlockSection>

If you want to reRender a specific field, consider rendering the entire page block section instead:

reRender="Variables"

Bob's specific problem had to do with essentially unstyled code not being rendered correctly. If you render the parent element, all of the children should be regenerated correctly.

---

Functional self-contained example:

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:inputField value="{!Account.Name}" />
            </apex:pageBlockSection>
            <apex:actionRegion renderRegionOnly="true">
                <apex:pageBlockSection id="section2" columns="1">
                    <apex:inputField value="{!Account.Industry}">
                        <apex:actionSupport event="onchange" reRender="section2" />
                    </apex:inputField>
                    <apex:inputField value="{!Account.Description}" rendered="{!Account.Industry='Technology'}"/>
                    </apex:pageBlockSection>
            </apex:actionRegion>
        </apex:pageBlock>
    </apex:form>
</apex:page>

You can use an actionRegion to isolate the area(s) that are affected, then use a reRender attribute to target the item(s) you want to redraw. Feel free to play with this example to see how you can use it. The fields that drive the render attributes must be inside the actionRegion for this to work.