Theo's Typesafe Cult•8mo ago

Include padding bottom when overflow-y-scroll

I have an element that needs to be scrollable. Specifically, this element is the parent element that encapsulates all elements bar my sidebar (im using nextjs, this element is element that encapsulates children in the root layout). I would like that when the element is scrolled, that the bottom padding is also included in the scroll, e.g if we were to scroll all the way down the page, the bottom padding on the element should be visible. Currently, when we scroll all the way down the element, the page cuts off before the bottom padding is displayed. (In the image attached, I have scroll the page all the way down) RootLayout:

import type { Metadata } from "next";
import "./globals.css";
import { SideNavBar } from "./_components/layout/SideNavBar";

export const metadata: Metadata = {
  title: "next Chessalyze",
  description: "chess with your friends!",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-full">
      <head></head>
      <body className="bg-stone-700 text-orange-50">
        <div className="flex h-screen w-full flex-row ">
          <SideNavBar />
          <div className="h-full w-full overflow-y-auto p-3 lg:p-5">
            {children}
          </div>
        </div>
      </body>
    </html>
  );
}

import type { Metadata } from "next";
import "./globals.css";
import { SideNavBar } from "./_components/layout/SideNavBar";

export const metadata: Metadata = {
  title: "next Chessalyze",
  description: "chess with your friends!",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-full">
      <head></head>
      <body className="bg-stone-700 text-orange-50">
        <div className="flex h-screen w-full flex-row ">
          <SideNavBar />
          <div className="h-full w-full overflow-y-auto p-3 lg:p-5">
            {children}
          </div>
        </div>
      </body>
    </html>
  );
}

24 Replies

Huilen•8mo ago

hi i think the problem is with the padding by some reason, the padding is not being applied on the element is the padding that divides the aside with the main content caused by this?

<div className="h-full w-full overflow-y-auto p-3 lg:p-5">
  {children}
</div>

<div className="h-full w-full overflow-y-auto p-3 lg:p-5">
  {children}
</div>

you can check it with the devtools

kalOP•8mo ago

yeah it looks to me that this is the case. Is there anything you could suggest to maybe fix the issue?

Huilen•8mo ago

sorry for the late reply! I think it may be that you are setting the height of the first container to 100vh, but the overflow-y-auto is being set on the second container.

      <body className="bg-stone-700 text-orange-50">
-        <div className="flex h-screen w-full flex-row">
+        <div className="flex h-screen w-full flex-row overflow-y-auto">
          <SideNavBar />
-          <div className="h-full w-full overflow-y-auto p-3 lg:p-5">
+          <div className="h-full w-full p-3 lg:p-5">
            {children}
          </div>
        </div>
      </body>

      <body className="bg-stone-700 text-orange-50">
-        <div className="flex h-screen w-full flex-row">
+        <div className="flex h-screen w-full flex-row overflow-y-auto">
          <SideNavBar />
-          <div className="h-full w-full overflow-y-auto p-3 lg:p-5">
+          <div className="h-full w-full p-3 lg:p-5">
            {children}
          </div>
        </div>
      </body>

the overflow-y-auto is set on the child, but the ovrflow is going to happen on the parent that has the h-screen

kalOP•8mo ago

I see I see, that makes sense. I’ve just this second powered down my computer for the night - but I’ll implement this change tommorow and get back to you. Hopefully it results in the behaviour I’m after. Appreciate your time!

kalOP•8mo ago

Made the changes - the padding does not seem to be visible. It also makes my side nav bar not cover the whole span of the page, although im pretty sure i could fix that. Ive attached an image of what the screen looks like with this change (scrolled all the way down).

tsx 
import type { Metadata } from "next";
import "./globals.css";
import { SideNavBar } from "./_components/layout/SideNavBar";

export const metadata: Metadata = {
  title: "next Chessalyze",
  description: "chess with your friends!",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-full">
      <head></head>
      <body className="bg-stone-700 text-orange-50">
        <div className="flex h-screen w-full flex-row overflow-y-auto">
          <SideNavBar />
          <div className="h-full w-full p-3 lg:p-5">{children}</div>
        </div>
      </body>
    </html>
  );
}

tsx 
import type { Metadata } from "next";
import "./globals.css";
import { SideNavBar } from "./_components/layout/SideNavBar";

export const metadata: Metadata = {
  title: "next Chessalyze",
  description: "chess with your friends!",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="h-full">
      <head></head>
      <body className="bg-stone-700 text-orange-50">
        <div className="flex h-screen w-full flex-row overflow-y-auto">
          <SideNavBar />
          <div className="h-full w-full p-3 lg:p-5">{children}</div>
        </div>
      </body>
    </html>
  );
}

Huilen•8mo ago

Its hard to debug by message, do you have it on a repository so i can download it and run it?

kalOP•8mo ago

Very true. Here's the repo in question. It does have a tiny bit of setup required with a couple of env variables, but you may just be able to delete the env.js file and omit this, although I think if you do this things might play up a bit. Nonetheless, if you dont fancy filling the env variables, you can simply extract the jsx as it is the very top level layout.tsx in question. https://github.com/FlynnHillier/chessalyze layout.tsx https://github.com/FlynnHillier/chessalyze/blob/main/src/app/layout.tsx

Huilen•8mo ago

I'm getting this error

Huilen•8mo ago

i cloned the repo, installed dependencies and the cli asked to run next-ws-cli@latest patch and I accepted

kalOP•8mo ago

I've had that error a couple of times - I usually have to resolve it by removing and reinstalling a certain dependency after adding another dependency. I'm pretty sure its an error in a the node-canvas module which one of my dependencies depends on. I'll look into fixing it tommorow, or atleast within the next couple of days, and get back to you; if you want to try if it 'fixes' it for you trying yarn remove @flynnhillier/chessboard-image-gen and then re-add it. After installing all other things.

Huilen•8mo ago

it works

Huilen•8mo ago

the main page has a "use server". be careful, idk if this is fine, because i havent worked with sockets, but use server is usually for server actions, not for defining server side components.

Huilen•8mo ago

i could not run the hole aplication, so i just replaced the actual game with a div. it works fine

Huilen•8mo ago

the error might be because of the display of this box

Huilen•8mo ago

i cant find this component, could you tell me which file it is in?

kalOP•8mo ago

Thanks for taking a look man. Appreciate it. The Panel component is stored at src/app/(dynamic)/(protected)/play/(panel)/_components/Panel.tsx. https://github.com/FlynnHillier/chessalyze/blob/main/src/app/(dynamic)/(protected)/play/(panel)/_components/Panel.tsx also - wow ok that is strange. I've got exams in a couple of days so cant really spare the time to play around with the code myself right now. I do really appreciate you taking the time to help me out.

Huilen•8mo ago

dont worry, when you have some free time, send a message and we get back to it

kalOP•7mo ago

🙏 will do. Thanks. I finish in just over a week. hey bro - long time I know. Finally back to normal - you still able to lend a helping hand in getting this resolved? < 3

Huilen•7mo ago

hi sure

kalOP•7mo ago

Thanks mate, appreciate it.

kalOP•7mo ago

Here is the styling of this component. It doesn't look to me like it has anything that would cause the padding of the body not to show. Interestingly I just tried adding a margin bottom to the component and visually it looks as I want it to. If we can't come up with a better solution I can hackily fix it like that.

Huilen•7mo ago

i think its better to fix it fast rather than spending so much time trying to debug it better to continue working on the proejct but can i set it up on my machine? do you have deplyoed it somewhere?

kalOP•7mo ago

I have it hosted on github still, but its not deployed anywhere. You can host it yourself locally, but it requires a set of google oauth credentials to work properly & a postgres db url. I dont think you'll be able to access that page without doing some finicky stuff without that.

Huilen•7mo ago

the google auth credentials are the hard part haha

Gaming

Programming

Include padding bottom when overflow-y-scroll