function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Yuvraj Ganesan 15Yuvraj Ganesan 15 

Alignment issue after using actionRegion

Hi All,

I used the below code to re render the pageBlockSection whenever I choose the relevant picklist. I achieved that thing but what i'm facing is alignment issue.

This is the VF Code i'm using it,
 
<apex:page standardController="Contact">
    <apex:form>
        <apex:pageBlock mode="edit">
            <apex:outputPanel>
                <apex:outputPanel>
                    <apex:pageBlockSection title="Audit Information" columns="1" collapsible="false" >
                        <apex:pageBlockSection columns="1">
                            <apex:inputfield value="{!contact.Languages__c}"/>
                            <apex:outputPanel layout="none">
                                    <apex:actionRegion>
                                        <apex:pageBlockSection>
                                            <apex:inputField value="{!contact.Choose_Number__c}" label="### ##### ### ######## ######## #### ### #### ## ####? ## ###, ###### ##### ##### ### #### ######### ##########  ### ######## ### #### ##### ### #### ######">
                                                <apex:actionSupport event="onchange" reRender="testRender"/>
                                            </apex:inputField>
                                        </apex:pageBlockSection>
                                    </apex:actionRegion>
                            </apex:outputPanel>
                            <apex:inputField value="{!contact.By_Mistake__c	}" />
                            <apex:inputField value="{!contact.Title}"/>
                            <apex:inputField value="{!contact.MobilePhone}"/>
                        </apex:pageBlockSection>
                        <apex:pageBlockSection columns="1">
                            <apex:inputField value="{!contact.Email}" />
                            <apex:inputField value="{!contact.Phone}" />
                            <apex:inputField value="{!contact.Title}" />
                        </apex:pageBlockSection>
                        <apex:outputPanel id="testRender">
                            <apex:pageBlockSection/>
                            <apex:pageBlockSection title="Show PageBlockSection" collapsible="false" rendered="{!contact.Choose_Number__c == 'Four'}" >
                            </apex:pageBlockSection>
                        </apex:outputPanel>
                    </apex:pageBlockSection>
                </apex:outputPanel>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
</apex:page>

The output for the above code is shown below,

Unaligned Multipicklist field

I want to align the multipicklist just like other fields are. Could anyone please help me how to achieve this one?
Hemant_SoniHemant_Soni
Hi Yuvraj Ganesan 15,

You need to try this
<apex:page standardController="Contact">
<style>
.detailList{
margin-left:14px;
}
</style>
    <apex:form >
        <apex:pageBlock mode="edit">
            <apex:outputPanel >
                <apex:outputPanel >
                    <apex:pageBlockSection title="Audit Information" columns="1" collapsible="false" >
                        <apex:pageBlockSection columns="1">
                            <apex:inputfield value="{!contact.Languages__c}"/>
                            <apex:outputPanel layout="none">
                                    <apex:actionRegion>
                                        <apex:pageBlockSection >
                                            <apex:inputField value="{!contact.Choose_Number__c}" label="### ##### ### ######## ######## #### ### #### ## ####? ## ###, ###### ##### ##### ### #### ######### ##########  ### ######## ### #### ##### ### #### ######">
                                                <apex:actionSupport event="onchange" reRender="testRender"/>
                                            </apex:inputField>
                                        </apex:pageBlockSection>
                                 </apex:actionRegion>
                            </apex:outputPanel>
                            <apex:inputField value="{!contact.By_Mistake__c }" />
                            <apex:inputField value="{!contact.Title}"/>
                            <apex:inputField value="{!contact.MobilePhone}"/>
                        </apex:pageBlockSection>
                        <apex:pageBlockSection columns="1">
                            <apex:inputField value="{!contact.Email}" />
                            <apex:inputField value="{!contact.Phone}"/>
                            <apex:inputField value="{!contact.Title}" />
                        </apex:pageBlockSection>
                        <apex:outputPanel id="testRender">
                            <apex:pageBlockSection />
                            <apex:pageBlockSection title="Show PageBlockSection" collapsible="false" rendered="{!contact.Choose_Number__c == 'Four'}" >
                            </apex:pageBlockSection>-->
                        </apex:outputPanel>
                    </apex:pageBlockSection>
                </apex:outputPanel>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
</apex:page>

if this help you then make is best answer.
Yuvraj Ganesan 15Yuvraj Ganesan 15
HI Hemant Soni 21,

Thanks for your reply. Style is not at all working. Any other suggestion you have?