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

27 messages · Page 1 of 1 (latest)

wispy pewter
#

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
```ts
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
```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;
}```
outer fernBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

pale zealot
#

why is there no {children} in your layout?

wispy pewter
haughty hemlock
#

What do you mean going after the last element? I didnt get the question:/

pale zealot
#

@wispy pewter could you describe your problem in more detail. not sure what the issue is

wispy pewter
#

Of course, sorry for the confusion, I am pretty new to this

#

After my last element, the page keeps going on for a while

Screenshot_2024-02-03_at_9.44.49_AM.png Screenshot_2024-02-03_at_9.44.57_AM.png
wispy pewter
haughty hemlock
#

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

wispy pewter
#

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

pale zealot
#

Something in your code is using height screen , height 100% or flex-grow maybe

#

Can you share any relevant css or tailwind classes

wispy pewter
#

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

Screenshot_2024-02-03_at_2.53.53_PM.png
wispy pewter
#

I've tried so many things, this thing is driving me crazy lolsob

pale zealot
#

When you inspect the code which element is taking up all the height? Check which classes are being applied

wispy pewter
#

Figured it out!

#

It was a dropdown that was too long but it wasn't visible