1

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>

The output for the above code is shown below,

Unaligned field in Vf page

I want to align the multipicklist just like other fields are. Could anyone please help me how to achieve this one?

0

Try this code, might be it solve your problem :

<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 style="margin-left:18%;" 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:pageBlockSection>
        </apex:outputPanel>
    </apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
  • I tried this but doesn't align properly in VF page. – RajDevBsc Jan 4 '17 at 14:44
  • I guess only Style issue is there because you've used and even said you were not getting the exact alignment you want after using Actionregion..try to change style in inputfield or i will update my answer by tomorrow !! :) – HSdev Jan 4 '17 at 14:49
0

got the solutions for the above question.

Here the code is,

<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:pageblockSectionItem >
                            <apex:outputLabel value="### ##### ### ######## ######## #### ### #### ## ####? ## ###, ###### ##### ##### ### #### ######### ##########  ### ######## ### #### ##### ### #### ######"/>
                            <apex:actionRegion >
                                <apex:inputField id="test" value="{!contact.Choose_Number__c}" >
                                    <apex:actionSupport event="onchange" reRender="testRender" />
                                </apex:inputField>
                            </apex:actionRegion>
                        </apex:pageblockSectionItem>   
                        <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="{IF(CONTAINS(!contact.Choose_Number__c == 'Four'),true, false)}" >
                        </apex:pageBlockSection>
                    </apex:outputPanel>
                </apex:pageBlockSection>
            </apex:outputPanel>
        </apex:outputPanel>
    </apex:pageBlock>
</apex:form>

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.