0

I want to create table that have fixed height of 300px , they table will be only Two Columns. for example one row of table is

|Alex Smith|checkbox|

I want the table once it reaches the height of 300px to the top next right and it keep fetching the data.

This is example of how i want to look like

|Alex Smith|checkbox||Alex Smith|checkbox||Alex Smith|checkbox|
|Alex Smith|checkbox||Alex Smith|checkbox|
|Alex Smith|checkbox||Alex Smith|checkbox|
|Alex Smith|checkbox||Alex Smith|checkbox|
|Alex Smith|checkbox||Alex Smith|checkbox|

Im using this to render my list

<apex:pageBlockTable value="{!myList}" var="e" >
Improve this question
2
  • You can't have pageBlockTable work this way. Instead, you'll need to use some sort of grid layout with CSS, like outlined in this question.
    – sfdcfox ♦
    Commented Feb 23, 2018 at 23:24
  • @sfdcfox that was hopeful
    – Amer Bearat
    Commented Feb 24, 2018 at 1:16

1 Answer 1

Reset to default
1

You should implement this with <apex:panelGrid>

Here is an example

<apex:page standardController="Booking_Event__c" extensions="EventInclusiveTotalPriceInlineExt" standardStylesheets="true" tabstyle="Booking_Event__c" docType="html-5.0">
  <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}
                .colStyle5 { width: 10%;padding-left:5px; text-align:left; padding-top:3px; padding-bottom:5px;}
    .colStyle6 { width: 10%;text-align:left; padding-left:5px; padding-top:3px; padding-bottom:3px}
    .colStyle7 { width: 10%; text-align:left;padding-left:5px; padding-right:10px; padding-top:3px; padding-bottom:3px}
    .colStyle8 { 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="8" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6,colStyle7,colStyle8">
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue1__c</apex:outputLabel> 
                                                <apex:outputfield value="{!bk.Forecase_Revenue1__c}"></apex:outputfield>
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue2__c</apex:outputLabel>
                                                <apex:outputfield value="{!bk.Forecase_Revenue2__c}"></apex:outputfield>
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue3__c</apex:outputLabel>
                                                <apex:outputfield value="{!bk.Forecase_Revenue3__c}"></apex:outputfield>
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue4__c</apex:outputLabel>
                                                <apex:outputfield value="{!bk.Forecase_Revenue4__c}"></apex:outputfield>
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue5__c</apex:outputLabel>
                                                <apex:outputfield value="{!bk.Forecase_Revenue5__c}"></apex:outputfield>
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue6__c</apex:outputLabel>
                                                <apex:outputfield value="{!bk.Forecase_Revenue6__c}"></apex:outputfield>
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue7__c</apex:outputLabel>
                                                <apex:outputfield value="{!bk.Forecase_Revenue7__c}"></apex:outputfield>
                                                <apex:outputLabel style="font-weight:600">Forecase_Revenue8__c</apex:outputLabel>
                                                <apex:outputfield value="{!bk.Forecase_Revenue8__c}"></apex:outputfield>       
      </apex:panelGrid>
    </apex:pageBlock>
  </apex:form>
</apex:page>

panel grid

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .