How do you make a DIV to auto expand in Height as new DIV added

HTML & CSS
1

Hey there,

I have a question for CSS Gods :slight_smile:
How do we expand the height of a DIV as new DIVs are added into it via JavaScript?
To see an example of what I am trying to do: we are creating a Node.js based Web chat where new chat messages are added to the chat DIV via Node/JS, as you can see in this sample room:

http://www.sitesticky.com/chat_test.php?public=yes

So as you add more and more messages then the chat_area DIV rather than auto expanding in Height starts writing over the input field and then goes off screen, etc. wrong. Even though this DIV has:
overflow: auto;
height: auto;

How do we then change the CSS for this DIV for it to Auto expand in Height as new messages are added to this DIV and it gets to the bottom of the chat area?

Thanks

2

The “div element” does that by default. :winky:

I would guess that this is where your problem resides…
``

#chat_area {
	width: 85%; 
	border: 1px solid gray; 
	height: 350px; 
}


_coothead_
3

Just like it did a week ago:-

3 Likes
4

No it does not as you can see in the sample chat, here:

http://www.sitesticky.com/chat_test.php?public=yes

So if you keep typing in chat messages when you get to the bottom of the chat area, then additional messages rather than expanding the chat_area DIV they over flow onto the input field area (DIV: type_area)
Keep in mind that the type_area is position: fixed;

6

It works OK for me. :biggrin:

Check out this attachment…

Anoox-Public-Chat-Room.zip (732.6 KB)

…which contains a “Snagit” image of your site after
entering lots and lots and lots and lots and lots of text. :winky:

If you have made changes to the CSS, then you may
need to clear cache - ( F5 ) - to see the results. :sunglasses:

coothead

7

Well I wish that was the case But have checked it by myself and others from multiple different browsers and in each case the Text messages over flow the chat area and on top of the Text message input field.

As you can see from screen shot here:

http://www.sitesticky.com/images/screen_shot_of_text_overflowing.jpg

8

What are you expecting to happen?

The footer is fixed positioned at the bottom of the viewport so once any content approaches the bottom of the viewport the content in both elements will overlap. There’s nowhere else for them to go.

Therefore the choices you have are not to have a fixed positioned footer but one that stays at the bottom of the content (like a normal footer) and the content just grows as required.

If you must have a fixed positioned footer then you would need to place a vertical scrollbar on the chat area instead so that the content never reaches the footer as such.

Here’s a flexbox demo of that approach with individual scrollbars on the content.

The only other method would be perhaps to have a sticky footer and not a fixed positioned footer but I doubt that is what you wanted.

I think you need to take a step back and describe exactly what you expect to happen to each one of those elements in turn. At the moment the content will just grow and overlap the footer. (Your min-height of 600px on the middle panels is not usable either because that means the footer will overlap on screens with a smaller height than 650px.)

1 Like
9

Paul,

1st thanks for your as usual thoughtful reply.
So in answer to your question:

1- This is going to be a Chat page which is to be used on desktop/laptop and on Mobile phone browsers

2- The message input field is to be always visible as that is considered to be key to user friendly chat interface

3- The chat messages are then to scroll up and down as they reach the maximum they can fit into the chat area which is to be bounded by fixed top area and fixed bottom area, much as it is on the text messaging interface of your iPhone or Android and popular chat sites

So what CSS do we need to achieve these objectives?

Much thanks

10

Check out the attachment…

world-news.zip (189.9 KB)

…it may be what you need. :winky:

coothead

2 Likes
11

Hi WorldNews,

These forums are about the extent of my chatting so I’m not up to speed on any of the interfaces.

I do feel like the one line text input would be a little too small for me. I like to be able to proofread my comments before clicking send/reply. Of course we have the option to go back and make edits here in the forum. A textarea with at least 3-4 lines of height would be a user friendly improvement.

As a user in your chat room I would appreciate the ability to toggle a larger chat panel if I was on a mobile device or a small screen. Screen real estate is very valuable on small devices so if I could toggle the panel it would make reading other comments much easier.

Working from the code Paul posted along with some slight changes I came up with something like this…




anoox-chat.html (2.7 KB)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox - 2 Column scroll panel</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	height: 100vh;
	overflow: hidden;
}
.wrap {
	height: 100%;
	height: calc(100vh - 5em);
	margin: 2.5em 0;
	overflow: auto;
	background: #ccc;
}
.main {
	display: flex;
	background: #ccc;
	padding: .5em .5em 6.5em;
	flex-wrap: wrap;
}
.content, .sidebar {
	border: 1px solid #ccc;
	box-shadow: 0 0 0 6px #ccc, 0 0 0 7px rgba(0,0,0,0.5);
	border-radius: 8px;
	padding: 10px;
	margin: 10px;
}
.content {
	flex: 1 1 50%;
}
.sidebar {
	flex: 1 1;
	min-width: 150px;
}
header, footer {
	position: fixed;
	width: 100%;
	height: 2.5em;
	padding: 10px;
	background: navy;
	color: #fff;
	text-align: center;
}
header {
	top: 0;
	left: 0;
}
footer {
	bottom: 0;
	left: 0;
}
p {
	margin: 2em 0
}
#chat-panel {
	width: 80%;
	max-width: 800px;
	height: 6em;
	position: absolute;
	bottom: 2.6em;
	left: 0;
	right: 16px;
	margin: auto;
	padding: 10px;
	border: 1px solid navy;
	border-radius: 5px;
	background: #fff;
}
#chat-panel textarea {
	width: 100%;
	height: 100%;
}
.hide {display: none;}
</style>
</head>

<body>
<div class="wrap">
   <header class="header">Anoox Public Chat Room</header>
   <main class="main">
      <div class="content">
         <p>Main content</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
      </div>
      <div class="sidebar">
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
         <p>Content to scroll</p>
      </div>
   </main>
   <footer>
      <div id="chat-panel">
         <textarea placeholder="Join the chat session" class=""></textarea>
      </div>
      <button id="toggler">Toggle Chat Panel</button>
      <button id="send_1" class="form_button" onclick="displayHelper_sendMessage('1');">Reply</button>
   </footer>
</div>
<script>
  var togglePanel = document.getElementById('toggler');
  togglePanel.onclick = function() {
    document.getElementById('chat-panel').classList.toggle('hide');
  }
</script>
  
</body>
</html>
1 Like
12

1st, very impressive Job man. You have produced more effect than staff I pay to do this stuff :slight_smile:
However your code does not work in 1 Key extent which is as the messages posted reach the bottom of the screen they go off of view and get buried under the input field area, which requires one to continuously scroll up to see the latest message posted. You can see your sample page here:

http://www.sitesticky.com/chat_coot.html

Thanks again,

13

Ray, This is a good suggestion. I am going to keep it in mind. But for now I would like to get the issue raised in this question addressed, which is how to create a Web Mobile friendly Chat interface that allows us to have Fixed top & Fixed bottom with the Chat area expanding and becoming scroleable as messages posted use the entire available chat area space.
But again your suggestion is going to go on top the “Consider” list for next and final features before this chat service goes live.

14

Hi there WorldNews,

My coding should only be considered as “work-in-progress”. :winky:

To get the last post to always be in view is further down the
“jobs -to-do” list as it requires “JavaScript” rater than “CSS”.

I just posted the attachment to let you know that your
problem had not been totally forgotten. :sunglasses:

coothead

15

Unless I’m misunderstanding you, that is what it does.

16

Oh, he wants it to automatically scroll and keep last post in view.

Yes that would be a JS job for sure

17

Hi there WorldNews,

the scrolling effect has now been incorporated. :winky:

Check out the attachment…

world-news-v2.zip (190.0 KB)

coothead

1 Like
18

It looks like @coothead has got you headed in the right direction with his latest zip.

Out of curiosity I went ahead and did some digging around at MDN, and found Element.scrollIntoView() to be of interest.

I don’t have the chat reply working but I did slip some JS in there to add content to the scrolling chat div.

It will view best in “Full Page View” at codepen.

1 Like
19

coothead,
1st. For various development and security reasons I had to take down chat_test.php which allowed Guest access to the Chat. I had put this up so you all could access the chat room at will. However the actual chat room, as being developed for real release, is at: http://www.sitesticky.com/chat.php
To access it though you need to either be an Anoox member which you can get for free here:
https://www.anoox.com/news/sign_up.php
Or you can be invited by a member with your email address, so if you want to send me that I can invite you in without being member.

Ok, with that said thanks can you please send me the specific CSS/HTML code that you added which you think gets the desired outcome?

Thanks,

20

Hi there WorldNews,

The specific files that I used may be found in the latest attachment. :winky:

world-news-v3.zip (462.1 KB)

You will notice that the sounds for arrival and posting now work.

coothead

21

Hi Coot,

1st, you have done amazing work on this new Chat interface you have created. WOW! My hat off to you :slight_smile:
I mean more quality work than people I pay to do such. But as nice as this revised chat room is it conflicts in many aspect with the actual chat interface which needs to be integrated into Anoox social network. So can you point me to the specific CSS / HTML & JS code that just handles the text messages scrolling within the Fixed Top and Fixed bottom?

Thanks,