Fixing a div's height + setting divs on different lines

Coding Help
1

Apologies for the long code and for the strange title as I could not find anything better to use. So basically, I’m trying to make one of those pop-up chats on websites and I’ve made the pop-up already, but it’s not working. The problem is that if I try to add more “message” divs (meaning, more divs with either the “message1” or “message2” class), it will push the input for typing text and the send button down further. The input & button are supposed to be at a fixed position since the pop-up is fixed. This is the code (apologies once again for it being long. Also for being terrible at coding in general.)

(html)

    <div id="chatBox" class="chatBox"> 
     
      <div id="chatName" class="chatName"> 
        
         <img style="display:inline-block" class="pfpMain" src="">

        (chat name)

      </div>



      <div class="chatPadding"> 
      

      <div class="message1">
        content
        </div>
        
        <div class="message2">
          content
        </div> 
        
        
        <!-- add more content here (message divs) using js -->
        
        
        <textarea spellcheck="false" rows="1" cols="5" class="chatTextInput" id="chatTextInput" style="resize:none;display:inline-block" placeholder="Type something.."></textarea>
        
        <button class="sendMsg" id="sendMsg">
          <i class="fas fa-paper-plane"></i>
        </button> 
       
    </div>
    </div>

(css)

.chatBox {
/* the pop-up */
background: white;
width: 20%;
padding: 0;
border-radius: 5px;
border: 2px solid #AA6BC5;
position: fixed;
bottom: 100px;
right: 30px;
z-index: 5000;
margin: 0;
height: 400px;
}

.chatPadding {
/* padding for the message divs and input */
padding: 20px 20px;
position: relative;
}

.chatName {
/* the box with a profile picture and name at top of chat pop-up */
background: #E4A5F6;
display:block;
color: white;
text-shadow: -1px 1px 0 rgba(255,255,255,0.3);
font-size: 23px;
margin: 0;
padding: 5px 20px;
}

.pfpMain {
/* profile picture */
border-radius: 50%;
height: 20px;
width: 20px;
vertical-align: center;
}

.sendMsg {
/* send button */
position: absolute;
bottom: -255px;
text-align: center;
right: 10px;
padding:9px;
border-radius: 5px;
box-shadow: -2px 2px 0 #D48DF3;
border: 2px solid #D48DF3;
cursor: pointer;
color: #D48DF3;
background: white;
}

.message1 {
/* messages sent in response to user */
float: left;
}

.message2 {
/* messages sent by the user */
float:right;
}

.chatTextInput {
/* input for typing text */
position: absolute;
bottom: -255px;
right: 50px;
width: 70%;
display:inline-block;
border: 2px solid #D48DF3;
box-shadow: -2px 2px 0 #D48DF3;
font-size: 15px;
color: #AA6BC5;
padding: 7px;
border-radius: 5px;
font-weight: 300;
}

Is there a way to make it so that if I add more content in the space I marked using JS, I can apply a scroll to the area with messages so that I can scroll through message history, while the area with input + send button remains fixed and doesn’t move at all at any point? I tried using things like bottom:0 and others recommended on stack overflow to position the input + send button at the bottom but none worked?

2

You can. Take a look at this introduction to so-called “overflowing” content:

That refers to a container element that has more content (e.g. messages in this case) than would fit. You can use CSS to declare that it should scroll in this case.

3

You can use overflow: auto; to the container and it’ll automatically decide whether or not to allow scrolling depending on the size of the container and whether the contents are “overflowing” the container.

4

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