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>
</>
);
}
Here is an example of an array containing object values: { user: ["data1", "data2"], user2: ["data1", "data2"], } I am looking to convert this object value array into an object value array object, like so: { ...
In my exploration of React tutorials and videos, I've noticed a common practice where individuals insert { " " } within their JSX templates. I'm curious about the reasoning behind this. It appears to serve as a substitute for line breaks, yet I ...
Recently, I was engrossed in developing a Next.js blog. After completing the frontend, I shifted my focus to building the backend using Next.js. ./pages/api I created a new file: ./pages/api/blogs.js To test my backend functionalities, I generated some J ...
Can someone help me with implementing Autocomplete from Material-UI? I want to store only a specific property value and not the entire object. For example, let's say I want to store the property Value, but it could be any other property as well. con ...
Currently, I am working on a single-page web application utilizing React and Material UI, along with React-Mini-Router for routing. The app features a side drawer that is activated by clicking a hamburger icon located in the top app bar. Each item in the d ...
I've experimented with various methods, including traditional form reset techniques and jQuery solutions from different sources on the internet without success. Snapshot: The Objective: I am working on a sortable list where users are required to ra ...
After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...
Is there a way to enhance my current css code for a mouseover link with a background image by adding a fade in and out effect? What's the most effective method to achieve this using jquery? .sendB { width: 100%; height: 125px; background: ...
Having trouble with the focus in a React Select dropdown. The first item always gets focused when opening the dropdown, despite passing various props without success. I checked their GitHub for related issues around autofocus but couldn't find a solut ...
I am facing difficulty in designing a layout with two panels where the left panel has relative positioning and the right panel becomes fixed only after a specific scroll point. Additionally, I need the height of the right panel to adjust when the page scro ...
Currently, I am attempting to create a header that spans the entire viewport regardless of screen size. This header will be split horizontally into 3 equal sections, each occupying one third of the header space. I experimented with setting the header hei ...
I have a unique react blog application embedded with a form for submitting intriguing blog posts. The setup includes a server, routes, model, and controllers for fetch requests. Surprisingly, everything functions impeccably when tested on Postman. However, ...
I have a question about using the transition effect in conjunction with the display property: Currently, I am testing on Safari. input.input_field { display:none; transition-property: display; transition-duration: 2s; -webkit-transition-p ...
Currently, I am developing a test to validate whether the error Notification component is displayed when the login form is submitted without any data. describe('User signin', () => { it('should fail if no credentials are provided&apos ...
I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label: inp ...
Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...
I have two different input boxes with unique ids and two different color picker palettes. My goal is to allow the user to select a color from each palette and have that color display in the corresponding input box. Currently, this functionality is partiall ...
A special Form has been created to retrieve the selected value from an option. import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; import { useState } from "react"; export default function Cu ...
Utilizing the Jikan API for anime, my objective is to showcase promo thumbnails of new anime shows. This involves two separate API calls: one to retrieve the latest anime shows: export const get_new_anime = () => `${base_url}search/anime?q&order_b ...
I have a collection of font files that I want to assign to specific font weights. @font-face { font-family: "custom-font"; src: url("font300.eot"); src: url("font300.eot?#iefix") format("embedded-opentype"), url("font300.woff2") format ...