How To Fix A Div Height

I'm working on a chat control app and my issue is like this. I enter the text, this is used to make a rest call, get the response, and add it to the chat window. Currently my issue

Solution 1:

Given your description above something like the below should work (Very simplified)

<divid="chatContainer"><divstyle="height:400px; overflow-y:auto;"><!-- YOUR CHAT CONTENT GOES HERE --></div><textareaid="HaveYourSay"></textarea><buttononclick="SendChat()">Send</button></div>

That will allow the contents of the div to reach a height of 400px before you get the scroll bar applied to the side.

Ive not used your HTML but have kept the example above simple so that you can apply it to your own app.

Check out the JS Fiddle : https://jsfiddle.net/6nep283h/1/

Note that I have used inline styles here for simplicity - I woudln't recommend using them in your app.

Solution 2:

Replace your class with this as below

.chat-box-div {
        border:2px solid #A12EB3;
        border-bottom:2px solid #A12EB3;
        max-height:400px ;
    } 

Solution 3:

Try this code for your portal

.chat-box-main{
     height:200px;
     overflow-y:scroll;
}

Solution 4:

Try this

.chat-box-main {
  max-height: 500px;
  overflow-y:scroll;
}