+ Start a Discussion
Rahul GoyalRahul Goyal 

want to draw a horizontal line whenever a new post commented...

HI All,

I have a VF page where I am showing child records in VF page. I have a headline as parent and comment as a child object. Each time a coment is posted on a headline every comment ill be shown up in a new line. I am able to show the comment in  a VF page but not able to draw up the line between the comments. I am new to VF and learning on styling side. kindly help me out, MY VF page code is below...

<apex:page controller="ContentsCalculation">
<apex:form >
 <apex:pageblock >
<style type = "text/css"> 
        border-bottom: 1px solid #000;
         <apex:outputText value="{!headlines.Name}" style="font-size:20px"/> <br></br>
             <apex:outputText value="{!headlines.CreatedDate}"> 

                <apex:outputText value="{!headlines.Contents__c}">
                <apex:outputText value="RecentMessage" style="font-size:20px" styleClass=".aDiff"></apex:outputText>

  <!--<input type ="text" id = "comment" min="1" max="1000" placeholder = "Add your comments here" styleClass = ".aDiff" value= "{!commentValue}" />-->
           <tr><td> <apex:inputText value="{!commentValue}"/></td>
            <td><apex:commandButton action="{!saveComment}" value="Post" /> </td></tr>
     <apex:pageBlockSection >
      <table column="1">
         <tr column="1">  
          <apex:repeat var="list" value="{!CommentsData}">
           <apex:repeat var="p" value="{!list.Comments__r}">
                    <apex:outputPanel > <td column="1">
                          <apex:outputField value="{!p.Comment__c}" label="">

public Class ContentsCalculation

    public List<Comments__c> saveComment1 { get; set; }
  public Headlines__c headlines{get;set;}
  public String commentValue{get;set;}
   public ContentsCalculation() {

        headlines = [select id,Name,Contents__c,CreatedDate from Headlines__c where Id = :ApexPages.currentPage().getParameters().get('id') ];

 public PageReference saveComment()
    saveComment1 = new List<Comments__c>();
 for(Headlines__c head :[select id from Headlines__c where ID = :headlines.id])
    saveComment1.add(new Comments__c(Headline__c= head.id,Comment__c = commentValue,Name = commentvalue));
   insert saveComment1;
   return null;
 public void refreshData()
   commentValue = '';
 public List<Headlines__c> getCommentsData()
   List<Headlines__c> listOfComments = [select Id, Name,(Select Id,Comment__c from Comments__r ORDER BY CreatedDate DESC) from Headlines__c where ID = :headlines.id ];
    System.debug('**list of comments' +listOfComments);                        
   return listOfComments;

Kindly suggest some ideas to improve the look and feel .....

Thanks in advance..

To start with, the <hr> tag is used by itself and shouldn't be wrapped around a section.  If VF is complaining about it not being closed just use "<hr />"

If just using a single <hr> tag isn't producing what you want you could just add a styleClass or just a normal CSS class to any number of elements in your code.  Then in your CSS add:
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;

I would suggest that you do an apex:repeat for each comment and then move your "<tr>" inside the repeat so that each comment is in it's own row.  Then just style the "<tr>" tag with CSS to add a border between each comment.
Rahul GoyalRahul Goyal
Hi pcon...thanks for the response...Can you please update the VF page which I have posted......It would be really helpful for me. 
Can you please upload a screenshot of what you currently have?