1

This is the code for page block section:

<apex:pageBlockSection title="Search Territory Accounts" collapsible="false">
    <apex:panelGrid columns="4">
        <apex:inputField value="{!territory.Name}" label="Test" id="test123"/>
        <apex:input type="date" title="Start Date" value="{!startDate}" id="startDate"/>
        <apex:input type="date" title="Effective Date" value="{!effectiveDate}" id="effectiveDate"/>
        <apex:input type="date" title="End Date" value="{!endDate}" id="endDate"/>
    </apex:panelGrid>
</apex:pageBlockSection>

And the result is enter image description here I am trying to place the Label on top of the input field. I have just modified the first column to see if it works but it did not. And also each grid should look like a different block as shown here:

enter image description here

I tried placing output and input labels in pageblockselectionitems, but it did not work:

<apex:pageBlockSectionItem>
    <apex:outputLabel value="Test" for="test123"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem>
    <apex:inputField value="{!territory.Name}" label="Test" id="test123"/>
</apex:pageBlockSectionItem>

It is still showing the output label on the left side of the input field.

Updated

<apex:pageBlockSection title="Search Territory Accounts" collapsible="false">
    <apex:panelGrid columns="4" cellSpacing="20" styleClass="">
        <apex:pageBlock title="Test">
            <apex:inputField value="{!territoryAssociation.Name}" id="test123"/>
        </apex:pageBlock>
        <apex:pageBlock title="Start Date">
            <apex:inputField type="date" value="{!territoryAssociation.Effective_Date__c}" id="startDate"/>
        </apex:pageBlock>
        <apex:pageBlock title="Effective Date">
            <apex:inputField type="date" value="{!territoryAssociation.Effective_Date__c}" id="effectiveDate"/>
        </apex:pageBlock>
        <apex:pageBlock title="End Date">
            <apex:inputField type="date" value="{!territoryAssociation.End_Date__c}" id="endDate"/>
        </apex:pageBlock>
    </apex:panelGrid>
</apex:pageBlockSection>

enter image description here

2

Use this logic for apex:panelGrid and do not use apex:pageBlockTable

<style>
    .colStyle1 { width: 10%;padding-left:5px; text-align:left; padding-top:3px; padding-bottom:5px;}
    .colStyle2 { width: 10%;text-align:left; padding-left:5px; padding-top:3px; padding-bottom:3px}
    .colStyle3 { width: 10%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px}
    .colStyle4 { width: 10%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px}

</style>
  <apex:form>
    <apex:pageBlock mode="maindetail">
      <apex:panelGrid columns="4" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4">
            <apex:outputLabel style="font-weight:600">Planned Territory</apex:outputLabel> 
            <apex:outputLabel style="font-weight:600">Start Date</apex:outputLabel>
            <apex:outputLabel style="font-weight:600">Effective Date</apex:outputLabel>
            <apex:outputLabel style="font-weight:600">End Date</apex:outputLabel>
            <apex:inputField value="{!territory.Name}" label="Test" id="test123"/>
            <apex:input type="date" title="Start Date" value="{!startDate}" id="startDate"/>
            <apex:input type="date" title="Effective Date" value="{!effectiveDate}" id="effectiveDate"/>
            <apex:input type="date" title="End Date" value="{!endDate}" id="endDate"/>       
      </apex:panelGrid>
    </apex:pageBlock>
  </apex:form>

Layout will look like this (ignore about fields in the picture)

panel grid

  • Thanks for the answer. I needed each panel grid in a box and I already have a page block in top which displays other elements so I have modified my VF code. Please see my updates, now the issue is the title is displayed in two lines. – Nagendra Singh Jul 27 '17 at 5:59
  • 1
    <style type="text/css"> .pbTitle { white-space: nowrap } </style> – Santanu Boral Jul 27 '17 at 6:17
  • 1
    use the above style for no wrapping, refer this: salesforce.stackexchange.com/questions/10957/… – Santanu Boral Jul 27 '17 at 6:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.