Apex Code Development You need to sign in to do that
Don't have an account?
RadDude89 Visualforce Page split into 2 columns
Hi,
I'm trying to change our visualforce page so that it is seperated into 2 columns with a header above each column.
However we I check the page the section headers are on the left side and the field labels appears to be missing too.
Below is the visualforce code:
<apex:pageBlockSection columns="2">
<div class="brandTertiaryBgr pbSubheader tertiaryPalette" id="head_1_ep">
<span class="pbSubExtra">
<span class="requiredLegend brandTertiaryFgr">
<span class="requiredExampleOuter">
<span class="requiredExample"></span>
</span>
<span class="requiredMark">*</span>
<span class="requiredText">= Required Information</span>
</span>
</span>
<h3>Account Information<span class="titleSeparatingColon">:</span></h3>
</div>
<apex:pageblocksectionitem >
<apex:outputLabel value="Column 1"/>
<apex:outputPanel layout="block">
<apex:outputText label="Lead Owner" value="{!currentUserName}" />
<apex:inputField label="Lead Source" value="{!newLead.LeadSource}" />
<apex:inputField label="Lead Status" value="{!newLead.Status}" required="true" />
<apex:inputField label="Fuel Type" value="{!newLead.Fuel_Type__c}" />
<apex:inputField label="Region" value="{!newLead.Region__c}" />
<apex:outputField value="{!newLead.RecordTypeId}" />
</apex:outputPanel>
</apex:pageblocksectionitem>
<div class="brandTertiaryBgr pbSubheader tertiaryPalette" id="head_1_ep">
<span class="pbSubExtra">
<span class="requiredLegend brandTertiaryFgr">
<span class="requiredExampleOuter">
<span class="requiredExample"></span>
</span>
<span class="requiredMark">*</span>
<span class="requiredText">= Required Information</span>
</span>
</span>
<h3>Account Information<span class="titleSeparatingColon">:</span></h3>
</div>
<apex:pageblocksectionItem >
<apex:outputLabel value="Column 2"/>
<apex:outputPanel layout="block">
<apex:inputField value="{!newLead.Consumption__c}" />
<apex:inputField value="{!newLead.Dual_Fuel__c}" />
<!-- <apex:inputField value="{!newLead.Eligibility_for_QH_Metering__c}" /> -->
<apex:inputField value="{!newLead.Associated_Dual_Fuel_Site__c}" />
<apex:inputField value="{!newLead.Qualification_Check__c}" />
<apex:inputField value="{!newLead.GMPRN__c}" />
<!-- <apex:inputField value="{!newLead.Burn_Hour_Calender__c}" /> -->
<apex:inputField value="{!newLead.Electricity_Tax__c}" />
<apex:inputField value="{!newLead.Government_Non_Government__c}" required="true" />
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
Can anyone see what I am doing wrong here? Is it posible to have a heading on each column with the field names appearing?
Any help is much appreciated.
Thanks in advance
you can always modify internal content it to suit your needs.
VF:
<apex:page> <style> #col1,#col2{width:49%;display:inline-block;} </style> <apex:form > <div id="col1"> <apex:pageblock title="PageBlock Header1"> <apex:pageblockSection title="Section title1"> Field1: <apex:inputText /> </apex:pageblockSection> <apex:pageblockButtons > <apex:commandButton value="Save"/> </apex:pageblockButtons> </apex:pageblock> </div> <div id="col2"> <apex:pageblock title="PageBlock Header2"> <apex:pageblockSection title="Section title2"> Field1: <apex:inputText /> </apex:pageblockSection> <apex:pageblockButtons > <apex:commandButton value="Save"/> </apex:pageblockButtons> </apex:pageblock> </div> </apex:form> </apex:page>If this helps you out, please mark it Best Answer.