Div with Upward Scroll fixed in Centre

Question

Im struggling a bit with this project that I am working on. Essentially I have a chat interface built in angular, im having a problem getting the CSS styling right. At the moment the chat starts at the top, then scrolls down off the screen as the conversation grows. I can scroll with the conversation but this isnt very good UX.

I am trying to make it so the 'Send Message' box starts in the bottom third of the screen and is fixed. Then, as the conversation grows, the messages move upwards/away instead of downwards. Ideally I want this in a container that disappears (behind a header, etc).

I've been trying to wrap my brain around this for the past few days with not much luck. CSS isnt really a strong point of mine. Any help would be greatly appreciated

CSS & Image of current setup below (there is also a separate styling sheet but this is only for the button/message stylings:

<body><style>
body { background: #FFFFFF; color: #727272; }
h1, h2, h3, h4, { background: #FFFFFF; color: #212121; } body { background: #FFFFFF; color: #727272; }
html, body, form, strong, button, small, input, p, div, h1, h2, h3, h4
{ outline: 0; margin: 0; padding: 0; border: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4em; font-size: 100%; } !important;
a, a:active
{ color: #F8F8F8; text-decoration: none; }
a:hover { text-decoration: underline; }
button,
a { cursor: pointer; } strong { font-weight: 500; }
p, h1, h2, h3, h4 { margin-top: 1em; margin-bottom: 1em; }
h1, h2, h3, h4 { font-weight: 200; font-size: 32px; }
html, body, p, div { font-weight: 200; font-size: 17px; } .clear { clear: both }
.container { padding-right: 7vw; padding-left: 7vw; margin-right: auto; margin-left: auto; height: 100vh; }
</style><style>
/* .header { overflow: hidden; position: relative; min-height: 100vh; padding-bottom: 0vh; text-align: center; color: #F8F8F8; background: linear-gradient( to left, rgba(122,214,184,0.0) 0%, rgba(122,214,184,0.7) 100% ), linear-gradient( to bottom, rgb(60,240,80) 0%, rgb(122,214,184) 100% ); } */
.header { overflow: hidden; position: relative; min-height: 100vh; padding-bottom: 0vh; text-align: center; color: #F8F8F8; background: linear-gradient( to left, rgba(204,52,148,0.0) 0%, rgba(239,45,86,0.7) 100% ), linear-gradient( to bottom, rgb(204,52,148) 0%, rgb(204,52,148) 100% ); }
input::-webkit-input-placeholder { color: rgba(200,255,255,0.5) !important; } .header .signup { margin-top: 4em; } .header
input { background: transparent; color: #F8F8F8; border: 0; border-bottom: 1px solid rgba(255,255,255,0.8); line-height: 2em; font-size: 1.4em; text-align: center; width: 12em; }

/* .angularjs-chat-bubble-white { position: absolute; display: inline-block; background: transparent url(https://i.imgur.com/3Sdc2xD.png); background-size: 100%; background-repeat: no-repeat; } */
.bothello-bubble { position: absolute; display: inline-block; background: transparent url(https://i.imgur.com/kN9kf2o.png); background-size: 100%; background-repeat: no-repeat; }
.header .bubble-one { top: 15vh; left: 10vw; width: 30px; height: 30px; opacity: 0.1; transform-origin: 70% 400%; animation: bubble-move 3s ease-in-out 0s infinite alternate; }
.header .bubble-two { top: 44vh; left: 6vw; width: 100px; height: 100px; opacity: 0.1; transform-origin: 60% 400%; animation: bubble-move 4s ease-in-out 0s infinite alternate; }
.header .bubble-three { top: 75vh; left: 22vw; width: 20px; height: 20px; opacity: 0.2; transform-origin: 30% 120%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-four { top: 14vh; left: 28vw; width: 15px; height: 15px; opacity: 0.1; transform-origin: 20% 400%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-five { top: 30vh; left: 66vw; width: 14px; height: 14px; opacity: 0.2; transform-origin: 90% 100%; animation: bubble-move 5s ease-in-out 0s infinite alternate; }
.header .bubble-six { top: 8vh; left: 75vw; width: 23px; height: 23px; opacity: 0.2; transform-origin: 80% 200%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-seven { top: 33vh; left: 84vw; width: 120px; height: 120px; opacity: 0.2; transform-origin: 100% 90%; animation: bubble-move 6s ease-in-out 0s infinite alternate; }
.header .bubble-eight { top: 72vh; left: 85vw; width: 360px; height: 360px; opacity: 0.2; transform-origin: -100% 100%; animation: bubble-move 7s ease-in-out 0s infinite alternate; }
/* .messagebox { padding-top: 90vh; position: fixed;} */

@keyframes bubble-move { 0% { opacity: 0.6; transform: scale(1.0) rotate(-8deg) translate(-1px,-2px); } 70% { opacity: 0.3; transform: scale(1.04) rotate(10deg) translate(2px,1px); } 100% { opacity: 0.4;
transform: scale(0.94) rotate(-18deg) translate(-3px,-1px); } }
</style>

<div class="header">
<!-- <div class="container"> -->
<div class="bothello-bubble bubble-one"></div>
<div class="bothello-bubble bubble-two"></div>
<div class="bothello-bubble bubble-three"></div>
<div class="bothello-bubble bubble-four"></div>
<div class="bothello-bubble bubble-five"></div>
<div class="bothello-bubble bubble-six"></div>
<div class="bothello-bubble bubble-seven"></div>
<div class="bothello-bubble bubble-eight"></div>

<div class="container">
<ng-container *ngFor="let message of messages | async">
  <div class="message" [ngClass]="{ 'from': message.sentBy === 'bot',
                                    'to':   message.sentBy === 'user' }">
    {{ message.content }}
  </div>
</ng-container>
<div class="messagebox">
<label for="nameField">Your Message</label>
<input [(ngModel)]="formValue" (keyup.enter)="sendMessage()" type="text">
<button (click)="sendMessage()">Send</button>
</div>


<!-- </div> -->
</div>
</div>
</body>

Thanks so much.

Jay

This might help: https://stackoverflow.com/questions/34213227/scrollable-div-to-stick-to-bottom-when-outer-div-changes-in-size/34330934#34330934 — Asons, Jan 22 '18 at 06:33

tao · Accepted Answer · 2018-01-22T09:45:21.297

You're looking for:

.container {
  display: flex;
  flex-direction: column;
}

.container>ng-container {
  flex-grow: 1;
  overflow: auto;
}

.container>.messagebox {
  flex-shrink: 0;
  margin-bottom: 3px;
}

You'll also need a small function to scroll <ng-container> to bottom whenever a message gets added to chat, something along these lines:

function scrollToBottom() {
  let elem = document.querySelector('ng-container');
  elem.scrollTop = elem.scrollHeight;
}

I don't know for sure what are best practices for manipulating DOM nodes in Angular2 (and above) and if there are any favored techniques over .querySelector.
Also note .querySelector can (and should) be used on any DOM node, so you probably want to use it on your ViewContainer rather than on the entire document.

But, since you haven't posted anything related to the JS part, I can't help you more there.

Thanks Andrei! How would you suggest I go about the scroll function? Cheers, Jay — , Jan 22 '18 at 04:10

Div with Upward Scroll fixed in Centre

1 Answers1