Comment box

Hello everyone. I made a simple comment box in HTML and it works just fine until the text becomes larger. I want a comment div to resize depending on how large text is. I had tryed all properties of overflow, but non of them satisfie my requirments. Thanks in advance.

Hi there timaraczarko,

if you gave us the code that would enable us to actually view
your problem, then members might be able be assist you. :winky:

coothead

Sorry because of that.
This is my HTML code in ejs template:

<% if (blog.comments.length > 0 ){ %>

<h3 class="section-comment-title">Comments: </h3>
<ol>

<% blog.comments.forEach(function(comment){ %>
<li id="comment-author"><%= comment.author %> <span id="comment-date">(<%= comment.date %>) </span></li>
<div id="comment-text">
<div class="arrow-up"></div>
<%= comment.text %> 
</div>

<% }); %>

CSS code:

#comment{
	margin-top: 6%;
	margin-left: 10%;
	background: #45aaf2;
	border-radius: 6%;
	width: 55%;
	height: 60%;
}

.comment-content {
	position: relative;
	top: 50px;
}

.comment-element {
	margin-left: 10px;
	margin-top: 10px;

	display: block;
}



.btn-submit{
	height: 36px;
	width: 100px;
}

#comments{
	position: relative;
	top: 40px;
}

.section-comment-title {
	text-align: left !important;
	font-weight: 200 !important;
	padding-bottom: 40px;
}

#comment-author {
	font-weight: 700;
	margin-top: 10px;
}
#comment-date {
		font-weight: 400;


}
li {
	list-style-type: disc;
}

#comment-text {


	margin-left: 10px;
	margin-top: 10px;
	background-color: #45aaf2 !important;
	border-radius: 3%;
	border: 2px solid #FFF;
	height: 50px;
	
	max-width: 350px;

}

.arrow-up {
  
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 27px 15px;
border-color: transparent transparent #45aaf2 transparent;
position: relative;
bottom: 10px;

}

And a picture of actual problem
comment-problem

The template code looks off. I don’t see a closing </ol> tag and I can’t imagine where it should be in relation to the loop code.

If you run the page’s HTML (not the template code) through the validator does it pass?

Remove the height:50px from the #comment-text
Or change it to min-height:50px and it will expand

3 Likes

The template code looks off. I don’t see a closing </ol> tag and I can’t imagine where it should be in relation to the loop code.

This is the 2nd part of the code:


</ol>

<%}else {%>

	<h1> No comments, write one </h1>
<%}%>
</div>

Thanks Ray.H , that worked!

1 Like

Nothing to do with your issue as Ray has given you the answer above but if I’m reading that template correctly then you are creating an invalid structure.

<li id="comment-author"><%= comment.author %> <span id="comment-date">(<%= comment.date %>) </span></li>
<div id="comment-text">

You are not allowed to have a div as a sibling of a list element. All content in a list must be between a pair of <li> Content here only </li> tags.

Some browsers will let you get away with it but some may not. :wink:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.