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

https://i.sstatic.net/Mb6IkupB.png

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

Is it possible to override the body width setting?

Is it possible to override the width of the body element? For example, consider the following: <body> <table id="table1"> <tr><td></td></tr> </table> <table id="table2"> <tr><td></td>& ...

jqueryhtmlcss

I prefer not to run the next.js SWR until after the initial rendering

Development Setup ・ next.js ・ typescript ・ swr This uses swr for communication purposes. I am looking to only trigger it when the query value changes. However, it is also being executed during the initial rendering. How can I prevent it ...

reactjstypescriptnext.jsswr

Stop Internet Explorer from automatically scrolling when it gains focus

Please access this fiddle using internet explorer (11): https://jsfiddle.net/kaljak/yw7Lc1aw/1/ When the page loads, the <p> tag is focused and Internet Explorer slightly scrolls the element so that the table border becomes invisible... document.qu ...

javascripthtmlcssinternet-explorer

Background image spacing

Can anyone explain why there is extra space after my background image in this code snippet? (red line in image highlights the spacing issue) Even though the background image doesn't have this space, it seems to extend beyond where the black color ends ...

htmlcss

Images with scratches visible in Chrome

This puzzle may seem easy to some, but it's been quite challenging for me. I've encountered a discrepancy in how Firefox and Chrome render images (specifically technical drawings). Despite my attempts to use image-rendering: -webkit-optimize-cont ...

cssimage

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

cssvisual-studio-codeprettier

Adjust the width of the column to only contain fixed content and not span the entire page

Check out my solution on Plunkr to see the issue I'm facing: Plunkr I'm dealing with a layout that includes a menu on the left and page contents on the right. My goal is to have the menu fixed in place so that it doesn't move when the page ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Rotate the horizontal scroll of an inner div within an outer div using CSS

I am looking to create an outer div with horizontal scroll and inner div with vertical scroll where the inner div moves along with the outer div. <body> <div id="wrapper"> <div id="outer">content outer <div id="inner"&g ...

css

ThreeJS OrbitControls malfunctioning in Next.js environment

My goal here is to enable camera orbit functionality for right, left, up, and down rotation with the object in front using the mouse. The object displays fine, but I'm having trouble with <OrbitControls/> I've tried using <PerspectiveCa ...

next.jsthree.jsreact-three-fiberreact-three-drei

Integrating a custom domain with a dynamic subdomain in a Next.js app hosted on Vercel, which is already using a

My Next.js app is deployed on Vercel, rendering subdomain-specific content and my domain is already linked to the project. Project Deploy URL: *.mysite.com For example, when John visits john.mysite.com, he sees content specific to his profile. The same g ...

next.jsdnscloudflarevercelcustom-domain

Is it possible to have a button within a table that, when clicked, opens a card overlaying the entire table?

I'm having an issue with a table and card setup. When I click the button in the table, the card that appears only covers part of the table. I want it to cover the entire table area based on the content inside the card. How can I make this happen? I&a ...

htmlcssangulartypescript

Encountering a 404 error when trying to access assets on _next folder after

I have encountered an issue while trying to deploy my next app to gh pages. Only the index and 404 pages are displaying, while all other pages, images, js, and css files inside the _next folder are returning a 404 error. After conducting some research, I ...

reactjsnext.jsgithub-actionsgithub-pages

Inserting lines into the text, creating a visually appealing layout

Can a notepad design be created using CSS only? Is it feasible to include lines between text lines without using underscores? I want it to look like this example but with minimal spacing between lines and no manual insertion of span tags since the text wi ...

jqueryhtmlcss

Add CSS styling to input text that is not empty

Is it possible to achieve this using CSS3 alone? var inputs = document.getElementsByTagName("INPUT"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "text") { if (inputs[i].value != "") { inputs[i].s ...

css

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Looking to incorporate two unique CSS animations into my project. Utilizing two buttons and one object, I want the first animation to trigger upon clicking the first button. I understand how to handle one button and one animation, but am unsure how to man ...

javascriptjquerycssanimationsvg

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

cssreactjsmaterial-uistylingcss-in-js

Troubleshooting: Browser fails to update after CSSStyleRule modification using JavaScript

When making changes to CSS properties of elements using JS methods like CSSStyleSheet, insertRule, deleteRule, or CSSStyleRule.style.setProperty(), I noticed that the underlying CSS is updated but the page does not reflect these changes immediately. The c ...

javascriptcssgoogle-chrome

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

htmlcsslayoutpseudo-element

Is there a way to create an X shape by rotating two divs when I click on the container div?

I currently have this setup: code Below is the HTML code: <div id="box"> <div id="line1" class="line"></div> <div id="line2" class="line"></div> <div id="line3" class="line"></div> </div> My go ...

javascriptjqueryhtmlcss

How to centrally position an image within a cropped parent container using CSS

Is there a way to center an img within a parent div tag that has overflow: hidden set? I am looking to clip the image equally on both sides in order to display the middle portion. <div class='wrapper'> <img/> </div> The desi ...

css