Apex Code Development You need to sign in to do that
Don't have an account?
RajaMohan How to give spacing between rows?
Hi,
I have a VF page to display the today's event details. It is displaying good. I need a spacing between rows now.
My code is,
<apex:page standardController="Event" extensions="dataTableCon1" >
<style>
.odd{background-color: white;}
.even{background-color: #DFEFFB;}
.line{line-height: 18pt;}
</style>
<script>
window.onload = alternate("thetable");
function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}
</script>
<input type="button" value="print" onClick="window.print()"></input>
<apex:form >
<apex:sectionHeader title="Events"/>
<apex:pageBlock >
<apex:pageBlockSection >
<apex:dataTable style="width:125%;" cellpadding="3" cellspacing="1" value="{!Tasks}" var="tak" id="theTable" rowClasses="odd,even"
styleClass="tableClass">
<apex:column style="width:8%;" >
<apex:facet name="header">Start Date</apex:facet>
<apex:outputText value="{!tak.StartDate__c}"/>
</apex:column>
<apex:column style="width:8%;">
<apex:facet name="header">Start Time</apex:facet>
<apex:outputText value="{!tak.StartTime__c}"/>
</apex:column>
<apex:column style="width:8%;">
<apex:facet name="header">End Time</apex:facet>
<apex:outputText value="{!tak.EndTime__c}"/>
</apex:column>
<apex:column style="width:8%;">
<apex:facet name="header">Name</apex:facet>
<apex:outputText value="{!tak.who.FirstName} {!tak.who.LastName}"/>
</apex:column>
<apex:column style="width:8%;">
<apex:facet name="header">Subject</apex:facet>
<apex:outputLink target="_blank" value="/{!tak.id}">{!tak.Subject}</apex:outputLink>
</apex:column>
<apex:column style="width:6%;">
<apex:facet name="header">Type</apex:facet>
<apex:outputText value="{!tak.who.Type}"/>
</apex:column>
<apex:column style="width:10%;">
<apex:facet name="header">Account Name</apex:facet>
<apex:outputText value="{!tak.AccName__c}"/>
</apex:column>
<apex:column style="width:10%;">
<apex:facet name="header">Account Type</apex:facet>
<apex:outputText value="{!tak.AccType__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">Description</apex:facet>
<apex:outputText value="{!tak.Description}"/>
</apex:column>
</apex:dataTable>
<apex:outputLabel rendered="{!(ISNULL(Tasks))}" value="No Events on this day.." styleClass="noRowsHeader"></apex:outputLabel>
<br/><br/>
<apex:commandButton value="Back" action="{!taskfin}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
If you give some useful examples then I feel better in understanding.
Thanks,
Did you try apex:pageBlockTable.
The output is not coming as expected in apex:pageBlockTable. It is good in apex:dataTable. But I need the spacing alone between rows. Kindly help me.
my suggestion is do for putting a empty row between two rows.
I will suggest you to use apex:repeat tag and html table tag.
yaa html table tag is more flexible.
or also you can use css and give spacing using the styles.
Hi,
Will you give some lines of code to achieve this? Because I didnt use html in the VF page yet.
Why dont you use cellspacing & cellpadding style attributes to get some space instead of adding blank rows
he already used cellspacing and cellpadding in his style you can see the code sin.
i raja,
try increasing the cell spacing to 5.You may get some space more .may it looks good that way,
Hi,
I achieved the output using the <apex:repeat> but unable to give the row color in alternate way as I have given before. Is there any solution to give the alternate color for rows as before in <apex:repeat>?
Good to know that you got it.
I hope you are using table tag.
Give the same style for the table that you used earlier.