You need to sign in to do that
Don't have an account?
❤Code
How to align inputfields as proper column wise in vf page
Hi All,
I have a vf page where I have inputfields. I need to align those fields in a column wise. Can anyone help me align the fields -
Current VF Page -
I need to display the above page as below -
VF page -
<apex:page standardController="Contact" extensions="ContactController">
<apex:form >
<apex:pageMessages />
<apex:pageBlock >
<apex:pageBlockSection title="Pick an account!" id="addressData" columns="7">
<apex:inputField value="{!c.LastName}" />
<apex:inputField value="{!c.AccountId}">
<apex:actionSupport event="onchange" action="{!fetchRelatedAccountData}" rerender="addressData" status="requestStatus"/>
</apex:inputField>
<apex:actionStatus id="requestStatus" startText="(requesting...)" stopText=" (done)"/>
<apex:inputField value="{!c.MailingStreet}" />
<apex:inputField value="{!c.MailingCity}" />
<apex:inputField value="{!c.MailingPostalCode}" />
<apex:outputField value="{!c.MailingCountry}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Regards
I have a vf page where I have inputfields. I need to align those fields in a column wise. Can anyone help me align the fields -
Current VF Page -
I need to display the above page as below -
VF page -
<apex:page standardController="Contact" extensions="ContactController">
<apex:form >
<apex:pageMessages />
<apex:pageBlock >
<apex:pageBlockSection title="Pick an account!" id="addressData" columns="7">
<apex:inputField value="{!c.LastName}" />
<apex:inputField value="{!c.AccountId}">
<apex:actionSupport event="onchange" action="{!fetchRelatedAccountData}" rerender="addressData" status="requestStatus"/>
</apex:inputField>
<apex:actionStatus id="requestStatus" startText="(requesting...)" stopText=" (done)"/>
<apex:inputField value="{!c.MailingStreet}" />
<apex:inputField value="{!c.MailingCity}" />
<apex:inputField value="{!c.MailingPostalCode}" />
<apex:outputField value="{!c.MailingCountry}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Regards
The above screen shot is only for use when we are showing many records of object in table.
You can acheive this by using <apex:pageblocktable> or you can user <apex:repeat> and then create your own table with custom CSS,.
http://www.thephani.com/pageblock-scrollbars/
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockTable.htm
http://nanostuffs.com/Blog/?p=751
-Thanks
Ashlekh Gera
Can u please suggest what modification needs to be done for my code above.
Regards
As per image or page you have put in question is showing a table. And in your code you are showing a single data.
If you want to show a single data in this way then you have to use custom css or bootstrap.
or
-Thanks
Ashlekh