+ Start a Discussion
uHaveOptionsuHaveOptions 

How to fix columns or align in 2 columns in Visualforce tabs

Hello my current code shows this.

User-added image

While it's nice to have that look.  I need the look of a regular salesforce look inside my tab.
User-added image

What code should I put to make it look like that?  My codes below.

Thanks in advance




<apex:page standardController="Property__c" showHeader="true" sidebar="false">
    <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #081f3f; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>

    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="Property__c" id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="Property Information" name="name1" id="tabOne">content for tab one
         <apex:form>
          <apex:pageBlock id="Property"> 
         <apex:pageBlockTable value="{!Property__c}" var="record" id="Property">
         <apex:column >


                    <apex:outputField value="{!Property__c.Name}" id="PropertyName" />
                    <apex:facet name="header">Name</apex:facet>
                    </apex:column>
                    <apex:column >
                    <apex:outputField value="{!Property__c.Property_Address__c}" id="PropertyAddress" />
                    <apex:facet name="header">Address</apex:facet>
                    </apex:column>
                    <apex:column >
                    <apex:outputField value="{!Property__c.City__c}" id="PropertyCity" />
                    <apex:facet name="header">City</apex:facet>
                    </apex:column>
                    <apex:column >
                    <apex:outputField value="{!Property__c.State__c}" id="PropertyState" />
                    <apex:facet name="header">State</apex:facet>
                    </apex:column>
                    <apex:column >
                    <apex:outputField value="{!Property__c.Zip_Postal_Code__c}" id="PropertyZip" />
                    <apex:facet name="header">Zip Code</apex:facet>
                    </apex:column>
                      <apex:inlineEditSupport event="ondblClick" 
                        showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" />
                      </apex:pageBlockTable> 
                 <apex:pageBlockButtons> 
                <apex:commandButton value="Edit" action="{!save}" id="editButton" />
                <apex:commandButton value="Save" action="{!save}" id="saveButton" />
                <apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton" />
            </apex:pageBlockButtons> 
           </apex:pageBlock> 
           </apex:form>
           </apex:tab>
   

        
        
        <apex:tab label="Building Information" name="name2" id="tabTwo">content for tab two</apex:tab>
        <apex:tab label="Financial Information" name="name3" id="tabThree">content for tab two</apex:tab>
        <apex:tab label="Loan Information" name="name4" id="tabFour">content for tab two</apex:tab>
    </apex:tabPanel>
</apex:page>

Best Answer chosen by uHaveOptions
Andy BoettcherAndy Boettcher
The "PageBlockTable" is designed for a vertical list of repeating or child record data.  Within your "PageBlock", use "PageBlockSection" and "PageBlockSectionItem" to get your desired look and feel.