function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lauren BLauren B 

Space between rows in panelgrid

Hi,
I am not able to give the space between the rows and its looking like the below picture. Please help. 
<style>
                    .colStyle1 { width:25%; height:25pX;text-align:right; padding-left:20px; padding-top:10px; padding-bottom:80px}
                    .colStyle2 { width:8%; height:25pX;text-align:left; padding-left:35px; padding-top:10px; padding-bottom:10px}
                    .colStyle3 { width:25%; height:25pX;text-align:right; padding-left:20px; padding-top:10px; padding-bottom:30px}
                    .colStyle4 { width:9%; height:25pX;text-align:left; padding-left:35px; padding-top:10px; padding-bottom:10px} 
                    .colStyle5 { width:25%; height:25pX;text-align:right; padding-left:20px; padding-top:10px; padding-bottom:10px}
                    .colStyle6 { width:8%; height:25pX;text-align:left; padding-left:35px; padding-top:10px; padding-bottom:10px}
                </style>





<apex:panelGrid columns="6" cellpadding="10" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6," >
                            
                            <apex:outputLabel style="width:100%;padding-left:10px;font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Package End Date</apex:outputLabel>               
                            <apex:outputfield  value="{!mma.MMA_BENE_GROUP_HEALTHINS_ENROLL_STARTD__c}"></apex:outputfield>
                            <apex:outputLabel style=" height:25pX;font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Enrollment Start Date</apex:outputLabel> 
                            <apex:outputfield value="{!mma.MMA_BENE_GROUP_HEALTHINS_ENROLL_ENDD__c}"></apex:outputfield>
                            <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Enrollment End Date</apex:outputLabel>
                            <apex:outputfield  value="{!mma.MMA_BENE_GRP_HEALTHINS_ENR_CONTRACT_NO__c}"></apex:outputfield>
                            <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Organization Contract Number</apex:outputLabel> 
                            <apex:outputfield value="{!mma.MMA_BENE_GRP_HEALTHINS_ENR_CONTRACT_NO2__c}"></apex:outputfield>
                            <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Organization Contract Number 2</apex:outputLabel> 
                            <apex:outputfield value="{!mma.MMA_BENE_GRP_HEALTHINS_ENR_CONTRACT_NO3__c}"></apex:outputfield>
                            <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Organization Contract Number 3 </apex:outputLabel>
                            <apex:outputfield value="{!mma.MMA_PBP_GROUP_HEALTH_EFFECTIVE_DATE__c}"></apex:outputfield>
                            <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Effective Date</apex:outputLabel> 
                            <apex:outputfield value="{!mma.MMA_PBP_START_DATE__c}"></apex:outputfield>
                            <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;"> Package Start Date </apex:outputLabel> 
                            <apex:outputfield value="{!mma.MMA_PBP_END_DATE__c}"></apex:outputfield>  
                            <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;">Plan Benefits Package End Date </apex:outputLabel> 
                            <apex:outputfield value="{!mma.MMA_PBP_NUMBER__c}"></apex:outputfield> 
                                                        <apex:outputLabel style="font-weight:bold;font-size:91%;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color: #4a4a56;">Plan Benefits Package Number </apex:outputLabel>






User-added image
ShivankurShivankur (Salesforce Developers) 
Hi Lauren,

Configuration in 'cellpadding' attribute in <apex:panelgrid> can be useful for your particular requirement.

It defines the amount of space between the border of each table cell and its contents. If the value of this attribute is a pixel length, all four margins are this distance from the contents. If the value of the attribute is a percentage length, the top and bottom margins are equally separated from the content based on a percentage of the available vertical space, and the left and right margins are equally separated from the content based on a percentage of the available horizontal space.

Reference:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_panelGrid.htm

Hope above information helps, Please mark as Best Answer so that it can help others in the future.

Thanks.