Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appearing at the bottom of the page—this seems to be exacerbated when using the shadcn/ui switch component.

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
} from "@/components/ui/form"
import { Switch } from "@/components/ui/switch"

const FormSchema = z.object({
    marketing_emails: z.boolean().default(false).optional(),
    security_emails: z.boolean(),
})

export default function Home() {
    const form = useForm<z.infer<typeof FormSchema>>({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            security_emails: true,
        },
    })

    function onSubmit(data: z.infer<typeof FormSchema>) {
        console.log(data)
    }
  return (
      <div className="flex h-screen">
        {/* Sidebar */}
        <div className="w-64 bg-gray-800 text-white p-4">
          <div className="bg-red-500 h-full">
            {/* Sidebar Content */}
          </div>
        </div>

        {/* Main Content */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Header */}
          <div className="bg-white shadow p-4">
            <div className="bg-green-500 h-12">
              {/* Header Content */}
            </div>
          </div>

          {/* Main */}
          <div className="flex-1 overflow-y-auto p-4">
              <div className="bg-blue-500 h-full mb-4">
                  <div className={"h-72 bg-yellow-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-orange-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-purple-50"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-blue-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"h-72 bg-pink-200"}>
                      <p>Coming soon</p>
                  </div>
                  <div className={"bg-green-200 h-72"}>
                      <Form {...form}>
                          <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
                              <div>
                                  <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
                                  <div className="space-y-4">
                                      <FormField
                                          control={form.control}
                                          name="marketing_emails"
                                          render={({field}) => (
                                              <FormItem
                                                  className="flex flex-row items-center justify-between rounded-lg border p-4">
                                                  <div className="space-y-0.5">
                                                      <FormLabel className="text-base">
                                                          Marketing emails
                                                      </FormLabel>
                                                      <FormDescription>
                                                          Receive emails about new products, features, and more.
                                                      </FormDescription>
                                                  </div>
                                                  <FormControl>
                                                      <Switch
                                                          checked={field.value}
                                                          onCheckedChange={field.onChange}
                                                      />
                                                  </FormControl>
                                              </FormItem>
                                          )}
                                      />
                                      <FormField
                                          control={form.control}
                                          name="security_emails"
                                          render={({field}) => (
                                              <FormItem
                                                  className="flex flex-row items-center justify-between rounded-lg border p-4">
                                                  <div className="space-y-0.5">
                                                      <FormLabel className="text-base">Security emails</FormLabel>
                                                      <FormDescription>
                                                          Receive emails about your account security.
                                                      </FormDescription>
                                                  </div>
                                                  <FormControl>
                                                      <Switch
                                                          checked={field.value}
                                                          onCheckedChange={field.onChange}
                                                          disabled
                                                          aria-readonly
                                                      />
                                                  </FormControl>
                                              </FormItem>
                                          )}
                                      />
                                  </div>
                              </div>
                              <Button type="submit">Submit</Button>
                          </form>
                      </Form>
                  </div>
              </div>
          </div>
        </div>
      </div>
  )
}

This code block serves as a demonstration only

The white space beneath the green box indicates the overscrolling issue

cssnext.jstailwind-cssshadcnui

Answer №1

If you want to set the h-screen attribute on the body tag, you can do so in the layout.tsx file.

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='en'>
      <body className='h-screen'>{children}</body>
    </html>
  )
}

You should also remember to remove this setting in the Home (page.tsx) file.

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'

import { Button } from '@/components/ui/button'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
} from '@/components/ui/form'
import { Switch } from '@/components/ui/switch'

const FormSchema = z.object({
  marketing_emails: z.boolean().default(false).optional(),
  security_emails: z.boolean(),
})

export default function Home() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      security_emails: true,
    },
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    console.log(data)
  }
  return (
    <div className='flex'>
      {/* Sidebar */}
      <div className='w-64 bg-gray-800 text-white p-4'>
        <div className='bg-red-500 h-full'>{/* Sidebar Content */}</div>
      </div>

      {/* Main Content */}
      <div className='flex-1 flex flex-col overflow-hidden'>
        {/* Header */}
        <div className='bg-white shadow p-4'>
          <div className='bg-green-500 h-12'>{/* Header Content */}</div>
        </div>

        {/* Main */}
        <div className='flex-1 overflow-y-auto p-4'>
          <div className='bg-blue-500 h-full mb-4'>
            <div className={'h-72 bg-yellow-200'}>
              <p>Coming soon</p>
            </div>
            <div className={'h-72 bg-orange-200'}>
              <p>Coming soon</p>
            </div>
            <div className={'h-72 bg-purple-50'}>
              <p>Coming soon</p>
            </div>
            <div className={'h-72 bg-blue-200'}>
              <p>Coming soon</p>
            </div>
            <div className={'h-72 bg-pink-200'}>
              <p>Coming soon</p>
            </div>
            <div className={'bg-green-200 h-72'}>
              <Form {...form}>
                <form
                  onSubmit={form.handleSubmit(onSubmit)}
                  className='w-full space-y-6'
                >
                  <div>
                    <h3 className='mb-4 text-lg font-medium'>
                      Email Notifications
                    </h3>
                    <div className='space-y-4'>
                      <FormField
                        control={form.control}
                        name='marketing_emails'
                        render={({ field }) => (
                          <FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
                            <div className='space-y-0.5'>
                              <FormLabel className='text-base'>
                                Marketing emails
                              </FormLabel>
                              <FormDescription>
                                Receive emails about new products, features, and
                                more.
                              </FormDescription>
                            </div>
                            <FormControl>
                              <Switch
                                checked={field.value}
                                onCheckedChange={field.onChange}
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name='security_emails'
                        render={({ field }) => (
                          <FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
                            <div className='space-y-0.5'>
                              <FormLabel className='text-base'>
                                Security emails
                              </FormLabel>
                              <FormDescription>
                                Receive emails about your account security.
                              </FormDescription>
                            </div>
                            <FormControl>
                              <Switch
                                checked={field.value}
                                onCheckedChange={field.onChange}
                                disabled
                                aria-readonly
                              />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>
                  <Button type='submit'>Submit</Button>
                </form>
              </Form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

I hope this explanation clarifies things for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting to input data into the database, an error is displayed stating that /test.php cannot be POSTed

Every time I try to input data using PHP, it throws an error Cannot POST /test.php. I've been attempting to fix it with no success. Can anyone please help me solve this issue? It's crucial for my project work. Here is my HTML code: <html> ...

javascriptphphtmlcss

Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...

htmlcss

Are the dimensions of <TD> and <table> not displaying properly?

I've encountered a peculiar issue that I need help with. Here is the Fiddle link: http://jsfiddle.net/H3W4X/ If you want to view it in fullscreen: http://jsfiddle.net/H3W4X/embedded/result/ This is the code snippet causing trouble: <div id="wor ...

jquerycsshtml-table

Trouble Viewing Fonts on Mobile Devices like iPhones

I am experiencing a frustrating issue on my website. While using Agency FB and Calibri fonts, they appear correctly on all desktop browsers. However, when accessed from my iPhone, a different standard font is displayed instead. Both the logo and text with ...

htmlcssiphonemobilebrowser

Positioning HTML elements using CSS and avoiding the use of tables

I'm struggling with my clear CSS declarations. This is how I'd like it to appear: View the Fiddle demo HTML: <div id="timesheeteditor"> <div id="weekselector"> <div>Week 1</div> <div>Week 2</div> ...

htmlcss

Problem with Metadata Changes in Next.js: Metadata Getting Reset After Rebuilding .next Directory

I've run into a problem while trying to customize metadata in my Next.js app. Even though I can successfully make changes to the metadata in my layout.tsx file, these modifications are not showing up in the console output. Additionally, whenever I del ...

next.jsmaterial-uimetadataemotion

Struggling to align a box perfectly to the right within an AppBar

I'm struggling with aligning the box containing user info to the right edge of my MUI App bar. It seems to be stuck at the end of the last box instead of going all the way to the right. Can anyone help me achieve this? https://i.stack.imgur.com/uJ1on. ...

cssmaterial-ui

Is verifying email and password with jquery possible?

I am currently working on a jQuery form validation project: While the password and username validation are working fine, I am facing issues with email and password confirmation validations. Surprisingly, I have used the same technique for both. If you wa ...

javascriptjqueryhtmlcssvalidation

What is the best way to adjust the dimensions of an element so that it only fills the size of the initial window or

I need help keeping a specific element at the initial 100% height of the viewport, without it resizing when the user changes their window size. Should I use JavaScript to determine the initial viewport height and then pass those dimensions to the CSS? Can ...

htmlcssviewport

Finding the complete file path in layout.js for NextJS version 13 within the app directory

My goal is to fetch the URL /events/345/edit from within the layout.js file. I am looking to show a "page name" title on each individual page.js, but in order to accomplish this, I require knowledge of my current location within the layout.js file. ap ...

reactjsnext.jsnext.js13

What is the best way to smoothly reveal images one by one?

My goal is to smoothly slide three images inside a div, one by one. However, I'm facing an issue where the images stack on top of each other and end up stuck in their original positions. Here is the code snippet I've been working with: <div ...

htmlcss

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

javascripthtmlcssajax

Creating multiple div elements with changing content dynamically

I am facing an issue with a div named 'red' on my website where user messages overflow the 40px length of the div. To prevent this, I want to duplicate the 'red' div every time a message is sent so that the messages stay within the boun ...

javascriptjqueryhtmlcssajax

What's the solution for aligning these progress bars side by side if floating them doesn't produce the desired result?

I am looking to place two progress bars next to each other, but I have tried using float: left and inline-block without success. I am open to a solution using flex, but I believe there must be a simple fix for this issue. Here is a link to the fiddle for ...

htmlcss

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

On a lengthy page with approximately 15 pages of text, I would like to insert a header at the beginning of each page when the document is printed by the user. Can this functionality be achieved using CSS or JavaScript/jQuery? ...

javascriptjquerycss

NextJS compilation sometimes results in undefined errors when using Sass styles

My peace lies in the sass code: .link display: inline-table text-align: center align-self: center margin: 5px 15px font-size: 20px color: black text-decoration: none transition: 0.1s ease-in-out .link:hover text-decoration: underline .l ...

csstypescriptsassnext.jstsx

Display all attribute connections for a product in Prestashop

I have updated the products in my shop to include different combinations. These combinations involve a 'packaging' attribute with two options: a 100 units box and a 200 units box, each with its own unique reference number. On the product page, t ...

phphtmlcssprestashop

Encountering a Credential Provider malfunction causing an Authentication Error

In my current project development, I am utilizing Next.js, Prisma, PostgreSQL, and Vercel for deployment. At this stage, I am focusing on establishing a credential provider. While the Google and GitHub providers are already operational and working efficien ...

next.jsprismanext-auth

Exploring Alternative Methods to Navigate Through Elements Using JQuery UI Autocomplete

After testing two different approaches: <div id = "team-search-container"> <label for="team-search" class = "text-center"> <input type = "text" id = "team-search"> </label> </div> With the following code sni ...

javascriptjqueryhtmlcssjquery-ui

The error message "TypeError: addNewUser is not a function in React.js onSubmit

What could be causing the error message "TypeError: addNewUser is not a function"? The issue arises when I complete the form and click save, displaying the error that addNewUser is not defined as a function. The problem occurs within the following code ...

javascriptreactjsnext.jsreact-hooksonsubmit