How to prevent a div going under a sticky div?
I want the text messages to not go under the sticky input.
4 Replies
Hey @akira , could you please provide a sandbox or more context about the issue you are experiencing and the exact behavior you are expecting?
Based on your screenshot, I'd say the sticky element is working as it should. When an element with
position: sticky; reaches a specified scroll position (usually based on its parent container), it becomes “stuck” and remains in that position as the user scrolls.
Did you intend to keep the input at the bottom, while the "chatbox" area is scrollable above the input?Hi Akira,
By looking just at your screenshot without the codes, I would suggest you to separate the parent div containing the messages list from the footer by giving it max-height and then adding overflow-y: auto.
In this way the messages won't get hidden inside the sticky div.
You may try the approach I have portraited down in my screenshot
Indeed. The parent container should have a defined height. Alternatively, check out this approach and let us know, akira
https://codepen.io/henrytuxdev/pen/PovbVQo