Centered Fixed Upward Scrolling Div

Currently facing a challenge with my project involving a chat interface created in Angular. I am struggling with the CSS styling as the chat starts at the top and scrolls downward off-screen as the conversation progresses. Although I can scroll along with the conversation, it doesn't provide a great user experience.

My goal is to have the 'Send Message' box positioned in the bottom third of the screen as a fixed element. As the conversation grows, messages should move upwards or away instead of downwards. Ideally, I would like this feature to be contained behind a header or similar element.

I've been grappling with this issue for the past few days but haven't had much success, particularly because CSS is not my strong suit. Any assistance on this matter would be highly appreciated.

Attached below is the CSS code snippet and an image of the current setup:

<body><style>
<!--CSS styling goes here-->
</style><style>
<!--More CSS styling-->
</style>

<div class="header">
<!--bubble animations go here-->

<div class="container">
<!--Angular code for message display and input form goes here-->

</div>
</div>
</body>

https://i.sstatic.net/i6cN4.png

Thank you very much.

Jay

Answer №1

The solution you're seeking is:

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

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

.wrapper>.chatbox {
  flex-shrink: 0;
  margin-bottom: 5px;
}

In order to automatically scroll <ng-container> to the bottom whenever a new message is added to the chat, a small function is required. Here is an example of how that function might look:

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

I am not certain about the recommended practices for manipulating DOM nodes in Angular2 (and newer versions) or if there are preferred techniques over using .querySelector. It's also important to note that .querySelector should be utilized on specific DOM nodes rather than the entire document.

Unfortunately, without any information regarding the JavaScript aspect, I am unable to provide further assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the solution for setting a regular height to a Bootstrap select when no option is currently selected?

On my webpage, I am incorporating bootstrap select and I want it to be empty initially with a value of "" when the page first loads. This is essential because it is a required field, so if a user attempts to submit the form without making a selec ...

How can I make the top two divs stay fixed as I scroll down, and then reset back to their initial position when scrolled

Hey there, I'm looking to have a div stay fixed after scrolling within its parent div. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="fw ofndr-box"> <div class="ofndr-box-half add-here"> <a href="#! ...

Creating whimsical freehand drawings using the 'pixie' feature in fabricjs

I am currently working on developing an 'Eraser' tool for my drawing application based on fabric.js. The goal is to create a free drawing app with a 0.5 opacity where the background image remains visible through the drawings. However, I have rea ...

The issue with calling Ajax on button click inside a div container is that the jQuery dialog box is

Here is the code for my custom dialog box: $("#manageGroupShow").dialog({resizable: false, draggable: false, position:['center',150], title: "Manage Group", width:"50%", modal: true, show: { effect:"drop", duration:1000, direction:"up" }, hide: ...

Distributing information to modules made of Polymer

Is there a way to create a single source for all data that my elements can utilize but not change (one-way data-binding)? How can I achieve this without using a behavior? I attempted the following in my code: <script type="text/javascript" src="/data. ...

Drawing a line beneath the mouse's center using JavaScript

Struggling with my JavaScript drawing tool, particularly the draw() function. The line is consistently off-center below the mouse cursor. How do I fix this issue? My aim is to have the line always follow the center of the mouse as it moves. Could someone c ...

Ways to resolve a 404 error on a live Angular application being hosted by NGINX

I am encountering an issue with my deployed application on a server where every time I refresh a specific page, I receive a NGINX 404 error. The application is running within Docker. Below is the configuration file for NGINX. server { listen 80; locat ...

Issues with the radio-inline class in Angular and Bootstrap causing functionality errors

Trying to align my radio buttons on one line using the radio-inline class from bootstrap. Here's my code: <label>Fattura a carico di </label> <label class="radio-inline control-label"><input type="radio" value="banca" n ...

Utilizing google.maps.places.Autocomplete within a JHipster application with a modal pop-up feature

I am struggling to make google.maps.places.Autocomplete function properly within a modal in Jhipster 4.6.1 / angular 4.2. The issue lies with the display of results, as the z-index of the .modal seems to be conflicting with the google css, resulting in no ...

There is no class present in the @Apply layer with Tailwind styling

I've been searching for what seems like a simple solution, but I can't seem to find it. While researching similar issues, I noticed that people were having problems with the Hover style and extra white space after it, which is not the issue in my ...

A table featuring an HTML select element that allows users to choose from preset options or manually enter

My goal is to incorporate a select box where users can either choose from a set list of options or input their own custom value. The select element is nested within a table. Unfortunately, using datalist is not a viable solution for me in this case. I have ...

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

Creating a bootstrap form field that spans 100% in width:

I am encountering an issue with two column divs in a row, each containing two text fields. When resizing on mobile, the width of the textbox is not expanding to 100% and looks unattractive. Below is my Bootstrap code, but strangely, the width looks fine f ...

Updating style in Javascript can sometimes be a bit tricky

What's preventing this from working? localStorage.fontSize contains the correct value, but the initial document.body.style.fontSize = localStorage.fontSize + "pt"; doesn't update the style. <script type="text/javascript> if(!localStorage. ...

Troubleshooting Angular: Resolving the Fatal Error 'SyntaxError: Unexpected token <' During Startup

I keep encountering this mysterious error repeatedly, especially after making changes to my Angular (2-5) dependencies. SyntaxError: Unexpected token < at eval (<anonymous>) at evaluate (http://localhost:5557/node_modules/systemjs/dist/sy ...

Guide to creating intricate designs on an HTML5 Canvas, one pixel at a time

Imagine a scenario where there is a 900x900 HTML5 Canvas element involved. In this case, there is a function named computeRow, which takes the row number as a parameter and returns an array of 900 numbers. These numbers represent colors ranging from 0 to ...

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

Is there a way to animate a logo using jQuery automatically upon page load? I want the image to zoom out, then zoom in and change to a different image. Can someone please assist me with this task? Below is the code snippet that I have: $(document).ready ...

Upload the PDF file along with other form data in a React application

I'm currently facing an issue with using formData for submitting a pdf file const [file,setFile] = useState() const [isFilePicked, setIsFilePicked] = useState(false); I have an input of type file <input accept=".pdf" type="file&quo ...

Is it possible to achieve a seamless change using show/hide jQuery functions when hovering over an

How can I achieve smooth transitions when using an image map to show a div on hover, similar to the functionality seen on this website: ? Below is my current JavaScript code: var mapObject = { hover : function(area, event) { var id = area.attr ...

What is the best way to create a fading footer effect on scroll using jQuery?

Why is my footer not fading in after 1000px like I want it to? Instead, it appears immediately on the screen. I attempted using fadeIn() in jQuery but had no luck. I also tried to make it disappear with fadeOut(), again with no success. Am I missing someth ...