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