Currently, I have integrated the react-full-page package into my project. However, after adding the Footer to the routes, I noticed that the footer is only visible in the second section of the page and does not appear at the bottom as expected.
If you want to take a look at the code, you can check it out on CodeSandbox.
In my setup, I have defined 2 routes - one for the home with the path "/" and the other for the about page with the path "/about".
Your FullPage component is positioned before your Footer element (as seen in the inspect console), but since your FullPage element has a fixed height, your footer ends up being placed below it. If you want your footer to appear after all other elements, you should include it within the FullPage component like this:
function Home() {
return (
<>
<FullPage>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Hi</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>Test Me</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<div style={{ height: "100vh" }}>
<h1>I am Home</h1>
</div>
</Slide>
<Slide>
<Footer />
</Slide>
</FullPage>
</>
);
}
I am encountering an issue where I am unable to retrieve an item from local storage and display it. In store.js, I am trying to get the shippingAddress from local storage but it is not showing up in the form. Although I am able to set the shippingAddress i ...
I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...
On my screen, there's a big image along with a text input and a button at the bottom. The screen has three main requirements: When the user taps on the input, both the input and button should be visible above the keyboard The user must be able to ta ...
After attempting the following, I encountered the following error: Unhandled Runtime Error TypeError: navbar.makeButtonClick is not a function Source .next/static/chunks/pages/index.js (19:29) @ onClick 17 | return( 18 | <button href='#&apo ...
There seems to be an issue with infinite looping in this code, and I can't figure out the cause, import React, { useEffect, useState } from 'react'; import VideoCardComponent from './VideoCard'; import Grid from '@mui/material ...
After deploying my webapp, which was created using asp.net, to a testing server (Windows 2003 SP2, IIS6), I encountered an issue. When I accessed the default page, none of the CSS styles were applied. Only plain text or formatting from the .aspx file was v ...
Currently, I am utilizing the Remix Form element to display my form with various input fields. When there is a server-side validation error, the entered text in the fields remains, as expected. However, upon successful submission of the form, I would like ...
A closer look at the two functions in question: const handleSubmit = async (e) => { e.preventDefault(); console.log(songLink) const newSong = { songName, songLink, userId }; const song = await dispatch(pos ...
Can someone explain to me the process of displaying multiple images in React.js? I am attempting to load an image using canvas and have tried the following code: https://codesandbox.io/s/o4o98kwy0y class App extends Component { constructor() { sup ...
I recently set up a Next.js project and deployed it to my CPanel. I also created a server.js file within the directory. However, when trying to access my website, I encountered an error message. The error displayed was: internal/modules/cjs/loader.js:638 ...
We are in the process of converting our portfolio from JavaScript to TypeScript, utilizing NextJS as the frontend framework and Strapi as the backend. To enable dynamic content, we have implemented a dynamiczone field within the post model that is accesse ...
I am working with the following function: extractCountries: function() { var newLocales = []; _.forEach(this.props.countries, function(locale) { var monthTemp = Utils.thisMonthTemp(parseFloat(locale["name"]["temperature"])); if(p ...
I am looking to condense this code, particularly the [if~else if] block, in order to dynamically change a className based on different props passed. export default function Button(props) { const { name, height, color, bgColor } = props; let className = ...
I'm a newcomer to React and am interested in integrating my React application with a websocket connection. Although I have successfully established a connection through the websocket, I am facing issues displaying the data in my app. Here is an exam ...
After creating a rotated iframe on the page using CSS transforms, I attempted to implement swipe events within the iframe. body.rotate iframe { transform: rotate(90deg); transform-origin: top right; position: absolute; t ...
Can anyone help me with my issue regarding Bootstrap scrollspy settings? It seems to be highlighting the wrong div id, always the last one. Here is the code snippet: Content: <body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> ...
I am new to TypeScript and I have a question regarding passing dynamic data to a React component while restricting props setting. I came across a simple component with the constraint of "RandomNumberProps", where the component can only accept either "isPo ...
Currently, I am attempting to implement a Cleave (visit for more information) as a Field within a Formik form. While standard components like text inputs are functioning correctly, the value change in the Cleave component is not being captured and is rese ...
I have encountered an issue with my Next.js app when I attempt to hard reload it in production mode. The error message I receive is 404 - File or directory not found. Below is the code snippet I am using: import { useRouter } from "next/router"; import ...
Having trouble removing the padding around material-ui's TextField component when using styled-components and inline styling. Any solutions to this issue? Interestingly, the inline width property is functioning correctly, unlike the styled-component w ...