function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
❤Code❤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 - 

User-added image

I need to display the above page as below - 

User-added image

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
AshlekhAshlekh
Hi,

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
❤Code❤Code
Hi AKG,

Can u please suggest what modification needs to be done for my code above.

Regards
AshlekhAshlekh
Hi,

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
  
<apex:pageBlockTable value="{!ListOfcontact}" var="t">
<apex:column headerName="LastName" value="{!t.LastName}"/>
<apex:column headerName="Accountid" value="{!t.Accountid}"/>
</apex:pageblocktable>



-Thanks
Ashlekh