Error page stopped growing into the rest of the screen.

Unanswered

Ichneumonid wasp posted this in #help-forum

Ichneumonid waspOP

2024-02-03T15:46:21.000Z

Hello, yesterday I posted about an issue I had related to my error pages introducing a scrollbar because Id like for it to take the entire screen height while take into consideration the fact that theres a navbar. So essentially the rest of the screen space left by the navbar. I was advised to do the following:

<html lang="en">
    <body className={inter.className}>
        <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
        >
            <div className="flex flex-col min-h-dvh">
                <Header />
                {children}
            </div>
        </ThemeProvider>

    </body>
</html>

Essentially wrap my main content in a "flex min-h-dvh" In my layout.tsx, and

<div className="grid grow  place-content-center bg-white px-4" >

put "grow" In my error page. Which worked. However today when I run my project I saw that the same issue persisted when I never changed the code at all. Any ideas ?

19 Replies

@Ichneumonid wasp Hello, yesterday I posted about an issue I had related to my error pages introducing a scrollbar because Id like for it to take the entire screen height while take into consideration the fact that theres a navbar. So essentially the rest of the screen space left by the navbar. I was advised to do the following: js <html lang="en"> <body className={inter.className}> <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > <div className="flex flex-col min-h-dvh"> <Header /> {children} </div> </ThemeProvider> </body> </html> Essentially wrap my main content in a "flex min-h-dvh" In my layout.tsx, and js <div className="grid grow place-content-center bg-white px-4" > put "grow" In my error page. Which worked. However today when I run my project I saw that the same issue persisted when I never changed the code at all. Any ideas ?

Clown

2024-02-03T16:42:36.000Z

Should work i think. Maybe try using flex-1 on that div instead of grid grow

Ichneumonid waspOP

2024-02-03T16:43:24.000Z

Same

Makes no sense, yesterday this code produced the result I wanted. Today, without having touched it it does not

Clown

2024-02-03T16:44:44.000Z

Its haunted then probably. Maybe try stopping the server and restarting and clearing cache and stuff

Also check devtools to see if something else is making it overflow

Ichneumonid waspOP

2024-02-03T16:52:17.000Z

Meh nothing

And I have no idea how to debug this

@Clown Also check devtools to see if something else is making it overflow

Clown

2024-02-03T16:53:54.000Z

Ichneumonid waspOP

2024-02-03T17:03:57.000Z

yea theres no errors or anything

Clown

2024-02-03T17:09:10.000Z

Yeah obviously no errors. Im just saying check the layout to see whats overflowing the layout.

Using dev tools

Ichneumonid waspOP

2024-02-03T17:10:11.000Z

Nothing its just the error page trying to be screen height but since theres the navbar its gets pushed down so it goes over the screen. Theres no other element. Just the navbar and the error page

Clown

2024-02-03T17:13:44.000Z

Did you try that "flex-1" instead of the grid grow tho?

Ichneumonid waspOP

2024-02-03T17:16:09.000Z

yep

nothing changed

Clown

2024-02-03T17:17:49.000Z

I dont know what's causing this then lol.

Is it maybe something to do with the content of the div itself?

Try removing that padding too just in case, and playing around with the content inside div.

Maybe post the code below the navbar here