The whitespace issue stems from the div element __next-build-watcher generated by next js and usecontext

There's a notification bar at the bottom of my page that lets the user know when their email has been sent.

This bar is generated using useContext in React/Next.js. To see the code, check out this Codebox link:

Code

However, I've noticed there is some white space at the bottom of the page near the navigation bar:

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

Upon further inspection, I realized that the blank space is due to the notification bar appearing like this when an email is sent:

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

Here's how it looks on the browser:

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

Any suggestions on how to remove the white space? I've attempted using CSS without success so far.

javascripthtmlcssnext.js

Answer №1

While this answer may be tardy, it could still prove useful for those who happen upon it:

This element isn't part of the production process; rather, it's only present when utilizing next dev. Its presence doesn't impact how your page is displayed.

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

How can JavaScript be used to activate HTML5 AppCache?

<html manifest="example.appcache"> Is it possible to use javascript to include the manifest="example.appcache" part? ...

html

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Does anyone know how to make a checkbox readonly so that its value can be submitted, while also disabling it? Using the disable attribute prevents the value from being submitted, and setting it as readonly doesn't seem to work for checkboxes. Your as ...

javascriptjqueryhtmlcss

Unable to modify background color in base website

While working on my project with Next.js, I encountered an issue where creating a button to change the color only affected the base web components' color and not the background color. _app.tsx import '../styles/globals.css'; import type { Ap ...

javascriptreactjsnext.jsbaseweb

Checking if the current time falls within a specific range while also taking minutes into account

I am currently working on a website for restaurants offering home delivery services. I need to enable or disable the 'Order Now' button based on the designated home delivery timings of each restaurant. For this purpose, I have access to the star ...

javascriptjquery

Run each element in sequence after the page has finished loading

I am currently exploring animate.css at and I am curious if it is feasible to apply CSS animations to multiple elements sequentially upon page load. Below are the three distinct elements I aim to animate: <img src="flowers.png" data-test="bounceInDow ...

javascriptcss

Node/Angular application facing a breach in content security

After working on a website built with node/express/angular/javascript, I returned to the project months later only to find that I couldn't display any page of the application when running it locally on node js. The error message "cannot get "{webpage} ...

htmlnode.jsangularexpresscontent-security-policy

Having trouble converting response.data to a string in ReactJS

import React, { Component } from 'react' import TaskOneServices from '../services/TaskOneServices' import circle from '../assets/icons/dry-clean.png' import tick from '../assets/icons/check-mark.png' async function ...

javascriptreactjsmongodbspring-bootbootstrap-4

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

Troubleshooting a jQuery filter function selector issue

Here's a function I've created: $.fn.filterByClass = function(cls) { var o = $(this); return o.filter(function() { if ($(this).attr("class") == cls) { return $(this); } }); }; Let's say we have multiple fo ...

javascriptjquery

Vuejs tutorial: Toggle a collapsible menu based on the active tab status

I am using two methods called forceOpenSettings() and forceCloseSettings() to control the opening and closing of a collapsible section. These methods function properly when tested individually. However, I need them to be triggered based on a specific condi ...

javascriptvue.jsbootstrap-vue

Having issues with angular-file-upload failing to include the file in the request

I am currently using angular-file-upload in order to upload an image to a server that is utilizing Node and Express 4.0. However, I am encountering difficulties in accessing the file data on the server. Below is the relevant code snippet: <input type= ...

javascriptnode.jsangularjsexpressangular-file-upload

Using jQuery to display a div after a 2-second delay on my website, ensuring it only appears once and does not reappear when the page is refreshed or when navigating to a

I manage a website that includes a blog section. Every time someone visits the site, I want a popup window to appear. (To achieve this, follow these steps - Utilize jQuery for showing a div in 5 seconds) I would like this popup to only be displayed once ...

javascriptjquery

My webpage layout doesn't quite accommodate my content, so I need to adjust it to be more zoom

Why does the page container load bigger than the html/body container in mobile mode, as shown in the photo? https://i.sstatic.net/fD1N4.png Here is my CSS: html { margin-top: 48px; width: 100%; } body { margin: 0; width: 100%; background: ...

javascripthtmlcssreactjs

Is it possible to modify CSS properties using Ajax?

I am attempting to dynamically change the background color of a div using AJAX to fetch the user's specified color from the database. Below is the code snippet I am using: $.ajax({type: "POST", data: {id: id}, url: "actions/css.php", success: functio ...

javascriptjquerycssajaxjson

Navigation that remains fixed while scrolling

Can someone help me fix the side navigation of this template to stay fixed when a user scrolls past it for easier navigation? I'm struggling with the code and could use some fresh eyes to look at it. I just can't seem to figure it out on my own, ...

jqueryhtmlcss

Error message: "Named export cannot be identified"

My file structure looks like this: routes auth login index.js Login.jsx routes.js Within the routes.js file, I have the following code snippet: import { Route } from 'react-router-dom'; import { Login } from './login ...

javascriptreactjsecmascript-6import

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

Link an HTML contact form to an Express.js backend server

Hey there, I'm a newcomer to web development and I've been working on creating the backend code for a contact form, but it keeps throwing errors. Here's my HTML code for the contact form: </div> <div class="row"> ...

htmlnode.jsexpress

Guide to making Bootstrap collapsible panels with full-width content that do not affect neighboring columns

I'm currently working on a responsive grid that displays items with expandable details when clicked. My issue is that when one item expands, the elements next to it collapse down, which is not what I want. I want all items to stay at the top and have ...

javascriptjqueryhtmlcsstwitter-bootstrap

React JS Button remains unaltered despite API call influence

I have encountered an issue with my page where a single post is displayed and there is a like button. The problem arises when the user clicks the like button - if the post is already liked, the button state should change to an unlike button. However, if th ...

javascriptreactjsreact-nativereact-reduxjsx