Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lakshmi SLakshmi S 

Visualforce page Input form allignment issue

Hi Team,

I am overriding the standard Account New button with a custom VF page, I want to display 3 input columns in each row, I am getting an alignment issue.

User-added imagePlease let me know anyone how to align in the same size.

Thanks,
Lakshmi.
Suraj Tripathi 47Suraj Tripathi 47
Hi Lakshmi

Greetings!

Please use the PageBlockSection columns attribute which helps you to set columns in your vf page.
example: 
<apex:pageBlockSection columns="2"></apex:pageBlockSection>
for refer https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockSection.htm

Please mark it as the best answer if it helps you to fix the issue.
Thank you!
Regards,
Suraj Tripathi
Lakshmi SLakshmi S
Hi Suraj,

Thanks for your reply. I want to display 3 columns in a single row, If i put Column size =3, alignment is not coming correctly.
Suraj Tripathi 47Suraj Tripathi 47
Hi Lakshmi,
you can add styling and add float-left as per your requirement or it'll be more clear to me if you can share your code.
Lakshmi SLakshmi S
Hi Suraj,

Thanks for your response, below is the sample code. Please check once and advise. How to change the alignment for the last column.

 <apex:pageBlockSection title="Americas" columns="3">
                            <apex:pageBlockSectionItem >
                                <apex:outputLabel>Input Field 1</apex:outputLabel>
                                <apex:inputField value="{!Account.Field1__c}" />
                            </apex:pageBlockSectionItem>
                            <apex:pageBlockSectionItem >
                              <apex:outputLabel>Input Field 2</apex:outputLabel>
                                <apex:inputField value="{!Account.Field2__c}"/>
                            </apex:pageBlockSectionItem>
                            <apex:pageBlockSectionItem >
                               <apex:outputLabel>Input Field 3</apex:outputLabel>
                                <apex:inputField value="{!Account.Field3__c}" />
                            </apex:pageBlockSectionItem>
                            
                             <apex:pageBlockSectionItem >
                                <apex:outputLabel>Input Field 4</apex:outputLabel>
                                <apex:inputField value="{!Account.Field4__c}" />
                            </apex:pageBlockSectionItem>
                            <apex:pageBlockSectionItem >
                              <apex:outputLabel>Input Field 5</apex:outputLabel>
                                <apex:inputField value="{!Account.Field5__c}"/>
                            </apex:pageBlockSectionItem>
                            <apex:pageBlockSectionItem >
                               <apex:outputLabel>Input Field 6</apex:outputLabel>
                                <apex:inputField value="{!Account.Field6__c}" />
                            </apex:pageBlockSectionItem>
                            
                        </apex:pageBlockSection>

User-added image