Catalyst: Unable to have fixed height full screen page without scrollbar

cedrictwillie commented 3 weeks ago

Component name: Catalyst

I'm using the ApplicationLayout as is with a h-screen max-h-screen child div. A vertical scroll bar is added to the page which I didn't expect. I'm attempting to have a fixed height (screen) div without any page scroll bar.

Steps to reproduce the behavior:

<html
      lang="en"
      className="text-zinc-950 antialiased lg:bg-zinc-100 dark:bg-zinc-900 dark:text-white dark:lg:bg-zinc-950"
    >
      <head>
        <link rel="preconnect" href="https://rsms.me/" />
        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
      </head>
      <body className="h-full">
        // leave ApplicationLayout styles untouched from demo
        <ApplicationLayout events={events}>
          <div className="h-screen max-h-screen bg-red-400" id="fixed-screen"></div>
        </ApplicationLayout>
      </body>
    </html>

Expected behavior I expected div id="fixed-screen" to be full screen with a fixed height and no vertical scroll bar on page for desktop and mobile. Instead, a vertical scroll bar appears and the page can be scrolled vertically.

Any help here would be much appreciated!

ctwillie commented 1 week ago

Help here would be appreciated! I'm still unable to have a full screen height fixed page. Thank you.

reinink commented 6 days ago

Hey there! Apologies on the delay. Happy to help try and figure this out.

So, I'm curious, why do you want a fixed full-height page? Is this because you're trying to achieve nested scroll areas within your page content?

If that's the case, the layout components in Catalyst weren't really designed for that, but you might be able to tweak the SidebarLayout component to support this.

For example, start by updating the wrapper element like this:

- <div className="relative isolate flex min-h-svh w-full bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
+ <div className="relative isolate flex h-svh w-full overflow-hidden bg-white max-lg:flex-col lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">

And then, within the <main>, update the panel element like this:

- <div className="grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
+ <div className="h-svh grow overflow-y-auto p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">

(Note, with this solution you don't need the fixed-screen element that you added, so remove that 👍)

This will result in the following behavior where the body content scrolls instead of the page:

https://github.com/user-attachments/assets/13dd2f03-b0e7-42ce-a77e-37d5d3b3de4f

That said, I would personally not recommend doing this if it's avoidable, as this effectively disables page scrolling, which breaks the browser's default scroll restoration when navigating through history state. Browsers only reset the <body> scroll position, they don't reset the scroll position of elements within the body.

Let me know if that helps!

ctwillie commented 6 days ago

Thank you very much for the reply/help here!

Yes, my intention here is to completely disable page scrolling and have the inner content vertically scrollable. (Its an sms/chat page feature). The only difference I would like that your video doesn't have is for the page contents parent container to be a max height of the screen.

I will attempt this again later while keeping your recommendation in mind and reply back. Thank you again.

<div id="page-parent"> // this max-height is the screens height, preventing page vert scroll

  <div id="child-content"> // this div has vert scroll ability
    // content grows vertical here
  </div>

</div>

reinink commented 5 days ago

Okay cool! As mentioned, our layout components weren't designed specifically for this use-case, but that's what's great about Catalyst — all the components are yours and you can modify them however you need to. Good luck! 💪

tailwindlabs / tailwindui-issues

Catalyst: Unable to have fixed height full screen page without scrollbar #1622