ASP.NET - repeater control

I'm developing a web site which has a user forum in it. It behaves pretty much similar to EE where people can add questions and anyone can post a comment for any questions. To display the comments for a single question i use ASP.NET repeater control.

<div class="repeater">
            <asp:Repeater ID="rptComments" runat="server" DataSourceID="ObjectDataSource1">        
                <ItemTemplate>
                <div class="comments">
                    <div class="colorbox"></div>
                    <h1>Comment</h1>                        
                    <p class="author"><b>Author:</b> <%#Eval("Author")%></p>
                    <p class="date"><b >Date:</b> <%#Eval("Created_date_time")%> </p> <br />
                    <p class="commentText"><%#Eval("Text")%></p>
                </div>
                </ItemTemplate>      
            </asp:Repeater>
        </div>

The actual comment it self is displayed by <%#Eval("Text")%> this line. Using CSS i control the look and feel of the repeater control.

.comments .commentText
{
    margin-left: 20px;
    font-weight: normal;
    font-size:13px;
    margin-bottom:20px;
    width: 650px;
    border:1px solid red;
}

The problem is when i post a comment which contains  a lot of characters the width of the text displayed exceeds the width of the Div tag rendered. Basically the the comments jump out of the div tag if there are more characters than the width of the div tag. How do i handle this?
sergeiweerasuriyaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sergeiweerasuriyaAuthor Commented:
By the way I'm using the FCKeditor to input Text. I'm using ASP.NET 2.0.
mrichmonCommented:
>>the comments jump out of the div tag if there are more characters than the width of the div tag

This is called overflow.  By default it should wrap, unless you have other styles, etc  in place preventing this.  In that case you can set the overflow style to handle creating a scrollbar:

http://www.w3schools.com/css/pr_pos_overflow.asp
sergeiweerasuriyaAuthor Commented:
Ok. that's better. Now the problem is there's a horizontal scroll bar & a vertical scroll bar. I don't want to have a horizontal scroll bar. What should i do? At the moment i've set the overflow property to 'auto'.

Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

mrichmonCommented:
Can you show your code?

The thing is that it should warp and not have a horizontal scroll unless you have something forcing that length...
sergeiweerasuriyaAuthor Commented:
<div id="repeater">
            <asp:Repeater ID="rptComments" runat="server" DataSourceID="ObjectDataSource1">
                <ItemTemplate>
                    <asp:Label ID="lblHeader" CssClass="header" runat="server" Text="Comment"></asp:Label>
                    <asp:Label ID="Author" CssClass="authorHeader" runat="server" Text="Author:"></asp:Label>
                    <asp:Label ID="lblAuthor" CssClass="author" runat="server" Text='<%#Eval("Author")%>'></asp:Label>
                    <asp:Label ID="Date" CssClass="dateHeader" runat="server" Text="Date:"></asp:Label>
                    <asp:Label ID="lblDate" CssClass="date" runat="server" Text='<%#Eval("Created_date_time")%>'></asp:Label>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><%#Eval("Text")%></div>
<%--                <asp:Label ID="lblText" CssClass="commentText" runat="server" Text='<%#Eval("Text")%>'></asp:Label>
--%>                <div class="clear"></div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
       
               
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetAllCommentsByIssueID"
            TypeName="IssueList">
            <SelectParameters>
                <asp:QueryStringParameter Name="IssueID" QueryStringField="PK_issue_id" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>



#repeater
{
    clear: both;
    margin-top: 50px;
    margin-left: 20px;
    border: 1px solid blue;
    width: 700px;
    padding:10px;
}


.header
{    
    font-weight:bold;
    font-size:14px;
    margin:40px 5px 10px 20px;
}

.authorHeader
{
    margin:0 5px 10px 280px;
    font-size: 11px;
    font-weight:bold;
}

.dateHeader
{
    margin:0 5px 10px 30px;
    font-size: 11px;
    font-weight:bold;
}
.date
{
    margin-bottom:20px;
}

.colorbox
{
    width: 700px;
    height: 30px;
    background-color: #a0896c;
    margin: -20px 0 0 0;
}

.commentText
{
    clear:both;
    margin: 10px 10px 50px 30px;
    overflow:auto;    
}

.clear
{
    clear:both;
    margin-top:30px;
}
mrichmonCommented:
Sorry I meant the generated code.  So that I can play with it and see what is causing it

Just one section of the repaeter that has the issue should be enough
sergeiweerasuriyaAuthor Commented:
What do u mean the generated code?
mrichmonCommented:
The html that the .net repeater generates.
sergeiweerasuriyaAuthor Commented:
<div id="repeater">
            <asp:Repeater ID="rptComments" runat="server" DataSourceID="ObjectDataSource1">
                <ItemTemplate>
                    <asp:Label ID="lblHeader" CssClass="header" runat="server" Text="Comment"></asp:Label>
                    <asp:Label ID="Author" CssClass="authorHeader" runat="server" Text="Author:"></asp:Label>
                    <asp:Label ID="lblAuthor" CssClass="author" runat="server" Text='<%#Eval("Author")%>'></asp:Label>
                    <asp:Label ID="Date" CssClass="dateHeader" runat="server" Text="Date:"></asp:Label>
                    <asp:Label ID="lblDate" CssClass="date" runat="server" Text='<%#Eval("Created_date_time")%>'></asp:Label>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><%#Eval("Text")%></div>
<%--                <asp:Label ID="lblText" CssClass="commentText" runat="server" Text='<%#Eval("Text")%>'></asp:Label>
--%>                <div class="clear"></div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
mrichmonCommented:
No that is the asp.net code.

It generates html code on the page.

If you go to the page where you see the problem you should be able to do "View Source" or something similar depending on your browser.

Find the <siv id="repeater"> and copy the html code from inside
sergeiweerasuriyaAuthor Commented:
<div id="repeater">
           
                    <span id="rptComments_ctl00_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl00_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl00_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl00_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl00_lblDate" class="date">29/05/2007 13:34:20</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText">Flip the back cover</div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl01_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl01_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl01_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl01_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl01_lblDate" class="date">30/05/2007 00:09:24</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText">Remove the battery</div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl02_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl02_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl02_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl02_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl02_lblDate" class="date">31/05/2007 08:53:07</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText">Thats wrong.</div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl03_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl03_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl03_lblAuthor" class="author">joe</span>
                    <span id="rptComments_ctl03_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl03_lblDate" class="date">31/05/2007 13:08:18</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText">e5y56u55u</div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl04_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl04_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl04_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl04_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl04_lblDate" class="date">01/06/2007 13:36:58</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText">32rwetertyhtykuilwetgtrujytujyukyuuykjyukyu
grt
htrhj
tyhjtyj
t</div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl05_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl05_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl05_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl05_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl05_lblDate" class="date">05/06/2007 11:53:05</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>rfwertytuyuiyjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjetujtyjyujkyuk</p>
<p>fkprejgikrhktjkerjghrjthjrkt</p>
<p>fgjeghjrtjhgkjrhkgrjkh</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl06_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl06_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl06_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl06_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl06_lblDate" class="date">05/06/2007 11:58:58</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>jjjjjjjjjjjjjjjjjjjjjjjjj</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl07_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl07_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl07_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl07_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl07_lblDate" class="date">05/06/2007 11:59:36</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>hhhhhhhhhhhhhhhhhhhh</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl08_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl08_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl08_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl08_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl08_lblDate" class="date">05/06/2007 12:01:21</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>rfwertytuyuiyjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjetujtyjyujkyuk</p>
<p>fkprejgikrhktjkerjghrjthjrkt</p>
<p>fgjeghjrtjhgkjrhkgrjkh</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl09_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl09_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl09_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl09_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl09_lblDate" class="date">05/06/2007 12:01:56</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>rfwertytuyuiyjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjetujtyjyujkyuk</p>
<p>fkprejgikrhktjkerjghrjthjrkt</p>
<p>fgjeghjrtjhgkjrhkgrjkh</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl10_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl10_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl10_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl10_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl10_lblDate" class="date">05/06/2007 12:02:14</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>jjjjjjjjjjjjjjjjjjjjjj</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl11_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl11_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl11_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl11_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl11_lblDate" class="date">05/06/2007 12:02:31</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>hhhhhhhhhhhhhhhhh</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl12_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl12_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl12_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl12_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl12_lblDate" class="date">05/06/2007 12:05:17</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>jjjjjjjjjjjjjjjjjjjjjjjjjjj</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl13_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl13_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl13_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl13_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl13_lblDate" class="date">05/06/2007 12:08:02</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>joeeeeeeeeeeeeeeeeee</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl14_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl14_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl14_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl14_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl14_lblDate" class="date">05/06/2007 12:10:53</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>joeeeeeeeeeeeeeeeeee</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl15_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl15_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl15_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl15_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl15_lblDate" class="date">05/06/2007 12:11:02</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>eeeeeeeeeeeeeeeeeeeeeeee</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl16_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl16_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl16_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl16_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl16_lblDate" class="date">05/06/2007 12:18:02</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl17_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl17_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl17_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl17_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl17_lblDate" class="date">05/06/2007 12:20:53</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl18_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl18_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl18_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl18_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl18_lblDate" class="date">05/06/2007 12:22:48</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl19_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl19_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl19_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl19_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl19_lblDate" class="date">05/06/2007 12:23:07</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl20_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl20_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl20_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl20_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl20_lblDate" class="date">05/06/2007 08:02:46</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>fddddddddddddddddddddddddddddddddddddddggggggggggggggggggggggggggggggyyyyyyyyyyyyyyyyyyyyyyyyyyterffgegrtgrthgthtyhtyhythtrh</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl21_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl21_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl21_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl21_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl21_lblDate" class="date">05/06/2007 12:28:16</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>joppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p></div>
                <div class="clear"></div>
               
                    <span id="rptComments_ctl22_lblHeader" class="header">Comment</span>
                    <span id="rptComments_ctl22_Author" class="authorHeader">Author:</span>
                    <span id="rptComments_ctl22_lblAuthor" class="author">sergei</span>
                    <span id="rptComments_ctl22_Date" class="dateHeader">Date:</span>
                    <span id="rptComments_ctl22_lblDate" class="date">05/06/2007 12:32:00</span>
                    <div class="colorbox"></div>
                    <div class="clear"></div>
                    <div class="commentText"><p>ttttttttttttttttttt</p></div>
                <div class="clear"></div>
               
        </div>
mrichmonCommented:
Ah okay that explains it.  It will not wrap because you have long text with no spacing.  if there is no spacing it will not wrap.  Your only option is the horizontal scroll bar, or to manually insert spaces or break points in your text

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sergeiweerasuriyaAuthor Commented:
The Problem is i'm using the fckeditor to submit the data to the DB. When i start typing into the editor the moment it reaches the right hand side border it doesn't actually go into the next line. Instead it automatically comes up with the horizontal scroll bar.... so i think that's the problem.
sergeiweerasuriyaAuthor Commented:
I understand what you mean now.
mrichmonCommented:
fck editor will actually wrap text if the text is wrappable, just as the web will.

This really doesn't have to do with the editor at all, but with the fact that there is no spaces in the text....
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.