+ Start a Discussion
ArchieTechie6ArchieTechie6 

CSS to include space/height/line-height between two <Apex:column> tags which are displayed as two rows

Hello All, 
Below is my code to display details from an object. I am using "rendered" to render only when value  is not null. This code works fine. 
To show some spacing between rows, I am using <br/> after each outputText.

The problem is : If some value is null and its not rendered, still <br/> will be rendered and shows unwanted spacing between rows. 
I have added a screenshot of the sample format of UI which I am trying to achieve. 

<apex:dataTable value="{!Docs}" var="docs">
    <apex:column >
        <apex:outputText value="ID : {!docs.Id}" /><br /><br />
        <apex:outputText value="Title : {!docs.Title}"/><br /><br />
        <apex:outputText value="Article Body : {!docs.Body__c}"/> <br /><br />
        <apex:outputText value="Article Number :{!docs.Number}"/> <br />
    </apex:column>
</apex:dataTable>
User-added image


What I want to do : I want to display space between rows, without using <br/>

 
Best Answer chosen by ArchieTechie6
Akshay_DhimanAkshay_Dhiman
Hi Archie,
Follow the below code. I have written the code for the standard Object (Account). Change the Object and fields Accordingly. 
<apex:page standardController="Account" recordSetVar="account" ShowHeader="false" sidebar="false">
	<apex:dataTable value="{!account}" var="act">
    <apex:column>
    	<apex:outputPanel rendered="{!IF(act.Id != null, true, false)}">
        	<div style="margin-top:30px"><apex:outputText value="ID : {!act.Id}" /></div>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!IF(act.Name != null, true, false)}">
        	<div style="margin-top:10px"><apex:outputText value="Name : {!act.Name}"/></div>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!IF(act.Parent != null, true, false)}">
        	<div style="margin-top:10px"><apex:outputText value="Parent : {!act.Parent}"/></div>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!IF(act.Owner != null, true, false)}">
        	<div style="margin-top:10px"><apex:outputText value="Owner :{!act.Owner}"/></div>
        </apex:outputPanel>	
    </apex:column>
</apex:dataTable>	
</apex:page>
Hope it helps you!
Regards,
Akshay

 

All Answers

Akshay_DhimanAkshay_Dhiman
Hi Archie,
Follow the below code. I have written the code for the standard Object (Account). Change the Object and fields Accordingly. 
<apex:page standardController="Account" recordSetVar="account" ShowHeader="false" sidebar="false">
	<apex:dataTable value="{!account}" var="act">
    <apex:column>
    	<apex:outputPanel rendered="{!IF(act.Id != null, true, false)}">
        	<div style="margin-top:30px"><apex:outputText value="ID : {!act.Id}" /></div>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!IF(act.Name != null, true, false)}">
        	<div style="margin-top:10px"><apex:outputText value="Name : {!act.Name}"/></div>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!IF(act.Parent != null, true, false)}">
        	<div style="margin-top:10px"><apex:outputText value="Parent : {!act.Parent}"/></div>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!IF(act.Owner != null, true, false)}">
        	<div style="margin-top:10px"><apex:outputText value="Owner :{!act.Owner}"/></div>
        </apex:outputPanel>	
    </apex:column>
</apex:dataTable>	
</apex:page>
Hope it helps you!
Regards,
Akshay

 
This was selected as the best answer
ArchieTechie6ArchieTechie6
Thank you so much Akshay_Dhiman! This is helpful 
SaraElovSaraElov
I am using the Line-Height attribute, and it works except for when I have an OutputPanel and have formatted fields to have in the sentence.  The result is the text here does NOT use the Line-Height I've specified.  The rest of the text does it perfectly.  Thoughts?
<!--  The section is for Event Attendee -->
<apex:pageBlockSection columns="1" 
               rendered="{!Opportunity.Campaign.Acknowledgement_Type__c = 'Event Attendee'}"  >
 <apex:outputPanel> 
        <apex:outputText style="font-family: Arial Unicode MS;font-size:10pt; Line-Height: 10px;" value="Thank you for joining us on  
            {0,date,long} " >
                <apex:param value="{!Opportunity.Closedate}"/>
            </apex:outputText>
        <apex:outputText style="font-family: Arial Unicode MS;font-size:10pt; Line-Height: 10px;" value=" at {!Opportunity.Campaign.Event_Location__c} 
        for {!Opportunity.Campaign.Name} hosted by {!Opportunity.Campaign.Hosted_By__r.Name}. We were thrilled you were able to 
        spend time with us and wanted to share with you some ways you can get involved with pur organization." >
            </apex:outputText> 
  </apex:outputPanel>                       

<p style="font-family: Arial Unicode MS;font-size:10pt;Line-Height: 12px;" > Researchers estimate that only between 2 and 9 percent of all foster youth will blah blah.......  a year. </p>
The Paragraphs print fine - it's just the OutputPanel lines that have too much space in between them.  They are 1.5 lines apart, not single-spaced.

Thanks!
Sara