CODEWITHSUNDEEP
javascripthtmlcssangular
Martheli
Martheli

Reputation: 981

Create Scrollable Div for Angular Chat

I am creating a chat application in Angular and I am trying to set up the UI for it. I need to create a div that will be housing the chat messages and as more messages fill the div I do not want the div to expand but just stay the same size and show a scroll bar. This div should be 100% the size of the parent div. As you click the button to add data the div grows. Even if I set a height in px or percent format the div still grows.

Upvotes: 1

Views: 875

Answers (1)

user7247147
user7247147

Reputation: 1107

The page you link won't load but here are the basics to make a scrollable element:

HTML / JS Structure

  1. Make an outer container div
  2. Make an inner container div (this will be the "scroll wrapper")
  3. Append the inner container to the outer container
  4. Insert whatever you need into the inner container (you can use something like insertAdjacentHtml or whatever works for your specific situation)

This order of steps in particular will work well for a scenario where the contents are dynamically changing.

CSS

  1. For the outer container

    • Set a fixed value for width and set height: auto
    • Set a border-radius if you want circular edges
    • Set overflow: hidden to keep the scroll wrapper's corners from popping out
    • You will probably want some padding

  2. For the inner container

    • Set position: relative
    • Set overflow-y: auto and overflow-x: hidden so that you can scroll up and down, but not side to side
    • For the desired overflow behavior, you need to set width: 100% and set fixed values for max-height and min-height. (max-height decides when things will start to overflow ie. make a scroll bar)
      • You will want max-height and min-height to be less than the outer container's fixed width + any padding, etc. it may have.

Upvotes: 1

Related Questions