Overflow and Height Issues
So I am trying to make a chat UI for a website
And issue I ran into is overflow, I made the chat section a specific height and made it scrollable so the chat doesn't take up the entire page and I added Inputs below it
The input does not take up the remainder of the parents height despite me making the height "h-full" (I am using Tailwind CSS). And after experimenting, I found it's because of the chat container. I calculated the height like this "max-h-calc[calc(100vh-26rem)]"
And when the user uploads an attachment, and the attachment is displayed it creates overflow.
My goal is for the chat section to resize automatically and for there to be no overflow on this page
This is the replit
https://replit.com/@demetrikameka18/Environment-Code?v=1
You can run it and see the issue I am taking about, when ran redirect yourself to "/tickets/1"
And issue I ran into is overflow, I made the chat section a specific height and made it scrollable so the chat doesn't take up the entire page and I added Inputs below it
The input does not take up the remainder of the parents height despite me making the height "h-full" (I am using Tailwind CSS). And after experimenting, I found it's because of the chat container. I calculated the height like this "max-h-calc[calc(100vh-26rem)]"
And when the user uploads an attachment, and the attachment is displayed it creates overflow.
My goal is for the chat section to resize automatically and for there to be no overflow on this page
This is the replit
https://replit.com/@demetrikameka18/Environment-Code?v=1
You can run it and see the issue I am taking about, when ran redirect yourself to "/tickets/1"
replitdemetrikameka18
Run SvelteKit (server) code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
