Next.js Discord

Discord Forum

The <body> of my project keeps going after the last elements

Answered
berkserbet posted this in #help-forum
Open in Discord
berkserbetOP
I'm not sure why, but it goes on multiple screen heights after. It's a single page app. I'm stuck so any help would be appreciated!

layout.tsx
<html lang="en" data-theme="winter">
      <body className={inter.className}>
        <div role="alert" className="alert alert-info">
          <span>🎉 Storefront.community is now gedd.it!</span>
        </div>
        <div className="navbar bg-base-200 rounded-box">
          <div className="flex-1 px-1 lg:flex-none">
            <Link className="text-md font-semibold md:text-xl p-1 text-center" href="/">🛍️ Geddit<p className="text-sm font-light flex items-center justify-center">Browse Reddit like eBay</p></Link>
          </div>
        </div>
        {children}
      </body>
    </html>


page.tsx
import React from 'react'
import ProductBroswer from './ProductBroswer';
import { ProductSearchParams } from '@/types/products';

interface Props {
  searchParams: ProductSearchParams
}

export default function Home({ searchParams }: Props) {
  return (
    <main>
      <ProductBroswer key={JSON.stringify(searchParams)} {...searchParams} />
    </main>
  );
}


globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
}

body {
  color: rgb(var(--foreground-rgb));
  padding: 1rem;
  overflow-x: hidden;
}

html, body {
  overflow-x: hidden;
}
Answered by Plott Hound
Something in your code is using height screen , height 100% or flex-grow maybe
View full answer

25 Replies

Plott Hound
why is there no {children} in your layout?
@Plott Hound why is there no {children} in your layout?
berkserbetOP
Oops looks like I deleted it when removing a div from it to show a simplified version, added it back
Clown
What do you mean going after the last element? I didnt get the question:/
Plott Hound
@berkserbet could you describe your problem in more detail. not sure what the issue is
berkserbetOP
Of course, sorry for the confusion, I am pretty new to this
After my last element, the page keeps going on for a while
Clown
Hmm... From what i can see its working as expected. Am i missing something?
The body covers the entire page as you can see from the color
Also maybe check that flex-1 div if you want body to only take as much space as the content.
In the layout.tsx
@Clown The body covers the entire page as you can see from the color
berkserbetOP
But the body keeps going much further than the page, there is a lot of whitespace at the end
I tried removing the flex-1 from layout.tsx but it didn't seem to fix it
The error happens at mobile sizes as well
Plott Hound
Something in your code is using height screen , height 100% or flex-grow maybe
Answer
Plott Hound
Can you share any relevant css or tailwind classes
@Plott Hound Something in your code is using height screen , height 100% or flex-grow maybe
berkserbetOP
Sure! I generally put all my css in the functions I shared. But I'll share others too
tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [require("daisyui"), require("@tailwindcss/forms")],
  daisyui: {
    themes: ['winter'],
  },
};
export default config;
postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
Anything else that might be relevant
These are the files I have
berkserbetOP
I've tried so many things, this thing is driving me crazy :lolsob:
Plott Hound
When you inspect the code which element is taking up all the height? Check which classes are being applied
berkserbetOP
Figured it out!
It was a dropdown that was too long but it wasn't visible