Responsive width of chat ui

Question

im trying to create a chat plugin like this

how to make the chat messages div responsive?

and also i want to make this auto scroll to newer chat, currently im using this

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

and the result like this, it doesn't immediately scroll to newer chat, it always waiting a couples of seconds

EDIT 1

Here's my current chat css

.message {
    margin: 0 15px 20px;
    padding: 10px 20px;
    position: relative;
    font-size: 15px;
    width: auto;
    min-width:1vw;
    max-width: 80%;
}
.message.to {
    background-color: #673ab7;
    color: #fff;
    margin-left: auto;
    text-align: right;
    white-space: pre-wrap;
    border-radius: 10px 10px 0px 10px;
}
.message.from {
    background-color: #e5e4e9;
    color: #363636;
    margin-right: auto;
    border-radius: 10px 10px 10px 0px;
}

now it looks like this

MaxiGui · Accepted Answer · 2021-05-05T06:37:37.810

Without much code, I will give you a basic example for the responsive

body{
  margin:0;
}
.container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 800px;
  max-width: 100%;
  background: salmon;
  padding: 15px;
}
.message {
    margin: 0 15px 20px;
    padding: 10px 20px;
    position: relative;
    font-size: 15px;
    width: auto;
    min-width:1vw;
    max-width: 80%;
}
.message.to {
    background-color: #673ab7;
    color: #fff;
    margin-left: auto;
    text-align: right;
    white-space: pre-wrap;
    border-radius: 10px 10px 0px 10px;
}
.message.from {
    background-color: #e5e4e9;
    color: #363636;
    margin-right: auto;
    border-radius: 10px 10px 10px 0px;
}

<div class="container">
  <div class="message from">Hi</div>
  <div class="message from">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur nisl nec velit lacinia facilisis. Vivamus quis nunc eu nisi fermentum pharetra sit amet quis purus. Nunc rutrum nisl nec rutrum commodo. Suspendisse potenti. Aenean quis porttitor turpis. Nulla nibh nulla, euismod ac pretium vel, viverra at arcu. Proin eu sem non sem eleifend congue. Fusce scelerisque, massa ut finibus ultricies, urna odio suscipit justo, nec feugiat ex ex at est. Mauris nec eleifend nulla, sit amet egestas nulla. Cras vel magna quis ante sollicitudin semper. Phasellus in turpis ut sem malesuada rutrum at eget ipsum.</div>
  <div class="message to">Hi</div>
  <div class="message to">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur nisl nec velit lacinia facilisis. Vivamus quis nunc eu nisi fermentum pharetra sit amet quis purus. Nunc rutrum nisl nec rutrum commodo. Suspendisse potenti. Aenean quis porttitor turpis. Nulla nibh nulla, euismod ac pretium vel, viverra at arcu. Proin eu sem non sem eleifend congue. Fusce scelerisque, massa ut finibus ultricies, urna odio suscipit justo, nec feugiat ex ex at est. Mauris nec eleifend nulla, sit amet egestas nulla. Cras vel magna quis ante sollicitudin semper. Phasellus in turpis ut sem malesuada rutrum at eget ipsum.</div>
</div>

I used your css but the container remain the same. For the auto-scroll this [subject](https://stackoverflow.com/questions/25505778/automatically-scroll-down-chat-div) already exists — MaxiGui, May 05 '21 at 06:38
i forgot to set display to flex, its working thanks. for auto scroll i use `detectChanges()` on `ngAfterViewChecked` its working now — naoval, May 05 '21 at 07:13

Responsive width of chat ui

1 Answers1