Starting November 20, the site will be set to read-only.
On December 4, 2023,
Apex Code Development (90768)
General Development (55146)
Visualforce Development (37251)
Lightning (18265)
APIs and Integration (17146)
Trailhead (11680)
Formulas & Validation Rules Discussion (11337)
Other Salesforce Applications (8116)
Jobs Board (6655)
Force.com Sites & Site.com (4842)
Mobile (2694)
You need to sign in to do that
Don't have an account?
Victor19 Hi,
I have created a Visualforce Page and within a page block section, I have 2 columns with different fields in each column. Everything works fine!
Is there a way to separate the columns like have a separation line in between the columns. Can someone suggest an approach that I can use to fix this issue?
Thanks!
Hi, so you are looking for a vertical line between all columns? You can try a panelgrid and some css. Something like this (I changed some of your fields because you were missing the __c at the end of some).
<apex:page standardController="Sample__c">
<style>
.tableStyle {border-collapse:collapse;}
.colStyle1 { width: 50%;text-align:left; padding-right:30px; border-right:1px solid #000;}
.colStyle2 { width: 50%; text-align:left; padding-left:30px; }
.rowstyle { padding:0px; }
</style>
<apex:form >
<apex:pageBlock title="Sample Edit" mode="detail">
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"/>
<apex:commandButton action="{!cancel}" value="Cancel"/>
</apex:pageBlockButtons>
<apex:panelGrid columns="2" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2" rowClasses="rowstyle">
<apex:outputLabel value="Name" /><apex:outputField value="{!Sample__c.Name}" label="Name"/>
<apex:outputLabel value="Address" /><apex:inputField value="{!Sample__c.Address__c}" label="Address"/>
<apex:outputLabel value="Name of Organization" /><apex:inputField value="{!Sample__c.Organization_Name__c}" label="Name of Organization"/>
<apex:outputLabel value="Contact Person" /><apex:inputField value="{!Sample__c.Contact__c}" label="Contact Person"/>
<apex:outputLabel value="Date" /><apex:inputField value="{!Sample__c.Date__c}" label="Date"/>
<apex:outputLabel value="Zip Code" /><apex:inputField value="{!Sample__c.City_State_Zip_Code__c}" label="City/State/Zip Code"/>
<apex:outputLabel value="Phone" /><apex:inputField value="{!Sample__c.Phone__c}" label="Phone"/>
<apex:outputLabel value="Fax" /><apex:inputField value="{!Sample__c.Fax__c}" label="Fax"/>
<apex:outputLabel value="Email" /><apex:inputField value="{!Sample__c.Email__c}" label="Email"/>
</apex:panelGrid>
</apex:pageBlock>
</apex:form>
</apex:page>
All Answers
Hey there, I'd probably use a pageBlockTable and add the border. Would that work for you?
If yes just add mode="maindetail" to your pageblocks.
Hi Avi,
Thanks for your reply. I tried mode=maindetail in my pageblock and all I see is like vertical line separations between each row of fields. I would like to have horizontal line separations between the 2 columns I have just like a table.
My page looks like this:
First Name: Last Name:
Address1: Address 2:
City: Zipcode:
Phone: Email:
I need a horizontal separation for these 2 columns in my page.
I believe this is possible through CSS. But, I wasn't sure if VF had the functionality in it that we could use.
Please give me your feedback!
<apex:page standardController="Sample__c">
<apex:form>
<apex:pageBlock title="Sample Edit" mode="detail">
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"/>
<apex:commandButton action="{!cancel}" value="Cancel"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="SECTION A - PROGRAM/ORGANIZATION INFORMATION" columns="2">
<apex:inputField value="{!Sample.Name}" label="Name"/>
<apex:inputField value="{!Sample.Address}" label="Address"/>
<apex:inputField value="{!Sample.Organization_Name__c}" label="Name of Organization"/>
<apex:inputField value="{!Sample.Contact__c}" label="Contact Person"/>
<apex:inputField value="{!Sample.Date}" label="Date"/>
<apex:inputField value="{!Sample.City_State_Zip_Code__c}" label="City/State/Zip Code"/>
<apex:inputField value="{!Sample.Phone__c}" label="Phone"/>
<br></br>
<apex:inputField value="{!Sample.Fax__c}" label="Fax"/>
<br></br>
<apex:inputField value="{!Sample.Email__c}" label="Email"/>
<br></br>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Thanks!
I just realized salesforce provides horizontal line separations. I am looking for vertical line separations between the two columns.
Do you have any suggestions?
Thanks!
Hi, so you are looking for a vertical line between all columns? You can try a panelgrid and some css. Something like this (I changed some of your fields because you were missing the __c at the end of some).
<apex:page standardController="Sample__c">
<style>
.tableStyle {border-collapse:collapse;}
.colStyle1 { width: 50%;text-align:left; padding-right:30px; border-right:1px solid #000;}
.colStyle2 { width: 50%; text-align:left; padding-left:30px; }
.rowstyle { padding:0px; }
</style>
<apex:form >
<apex:pageBlock title="Sample Edit" mode="detail">
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"/>
<apex:commandButton action="{!cancel}" value="Cancel"/>
</apex:pageBlockButtons>
<apex:panelGrid columns="2" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2" rowClasses="rowstyle">
<apex:outputLabel value="Name" /><apex:outputField value="{!Sample__c.Name}" label="Name"/>
<apex:outputLabel value="Address" /><apex:inputField value="{!Sample__c.Address__c}" label="Address"/>
<apex:outputLabel value="Name of Organization" /><apex:inputField value="{!Sample__c.Organization_Name__c}" label="Name of Organization"/>
<apex:outputLabel value="Contact Person" /><apex:inputField value="{!Sample__c.Contact__c}" label="Contact Person"/>
<apex:outputLabel value="Date" /><apex:inputField value="{!Sample__c.Date__c}" label="Date"/>
<apex:outputLabel value="Zip Code" /><apex:inputField value="{!Sample__c.City_State_Zip_Code__c}" label="City/State/Zip Code"/>
<apex:outputLabel value="Phone" /><apex:inputField value="{!Sample__c.Phone__c}" label="Phone"/>
<apex:outputLabel value="Fax" /><apex:inputField value="{!Sample__c.Fax__c}" label="Fax"/>
<apex:outputLabel value="Email" /><apex:inputField value="{!Sample__c.Email__c}" label="Email"/>
</apex:panelGrid>
</apex:pageBlock>
</apex:form>
</apex:page>
Hi Kemi,
Thanks for the suggestion. I do see a vertical line separation between my columns.
The code that you suggested works for displaying fields with field label in column 1 and field value in column 2.
But i would like to see different fields in both the columns. As in, I want to see Field 1 in column 1 and Field 2 in column 2 something like the one below:
Column 1 Column 2
Address________________ I Phone_______________
Do you have any suggestions?
Thanks!
Hi Victor, you may want to look into using apex:panelGroup in that case.
I haven't tried it, but I think that may help you get the label and outputField into one column.
http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=pages_compref_panelGrid.htm|StartTopic=Content%2Fpages_compref_panelGrid.htm|SkinName=webhelp
Thanks again!