I just need a way to make the footer sticky and stay at the bottom of the page while using react.
The footer does not stay at the bottom of the page, despite following the materialize docs and creating the header, main, footer format in my app.
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
Here is the render method of app.js:
render() {
return (
<React.Fragment>
<Header />
<main>
... my stuff here ...
</main>
<Footer />
</React.Fragment>
);
}
Here is the Header component:
export default function About() {
return (
<header></header>
);
}
Here is the Footer component (copied exact from the materialize docs):
export default function About() {
return (
<footer className="page-footer">
<div className="container">
<div className="row">
<div className="col l6 s12">
<h5 className="white-text">Footer Content</h5>
<p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div className="col l4 offset-l2 s12">
<h5 className="white-text">Links</h5>
<ul>
<li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
</ul>
</div>
</div>
</div>
<div className="footer-copyright">
<div className="container">
© 2014 Copyright Text
<a className="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
);
}
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
I have this in the head of index.html (the docs say this is how to make a sticky footer):
<script>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</script>
(I think it is because react mounts my app content inside a <div id="root"> in index.html and thus breaks the header, main, footer format materialize requires for the footer to be sticky.)
I just need a way to make the footer sticky and stay at the bottom of the page while using react.
In react jsx you must use className instead of class.
class is a reserved word in javascript.
You can use a <div> tag instead of a <React.Fragment> with display: flex and min-height: 100vh. In the <Footer /> tag you can apply a style with align-self: flex-end it should align the footer to the bottom of the page.
You can see this fiddle: https://jsfiddle.net/brunohgv/cjypx5wL/4/
Related
I am new to react, and I am working on my first project, following https://www.youtube.com/watch?v=qwM23_kF4v4.
At the very beginning, I followed all the steps and tries to set a sidebar on the left with "240px", the expected is as left, but what I made is as right.
The code is below. I only add the sidemenu part.
I have rechecked the code in the video many times, but it still shows as below. Furthermore, I expected the sidebar to be 50% of the screen, as shown in the video.
I have changed the sidemenu width as "100%", "40vmin", but nothing works.
What I have tried is as follows in App.css:
.sidemenu {
width: 1000px;
border:1px solid white;
}
My App.js code is as follows:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<aside className="sidemenua">
<h1>Aside</h1>
</aside>
<section>
</section>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Expected layout
My layout
please check your className is differ from css selector name it should be
sidemenu.
<aside className="sidemenu">
<h1>Aside</h1>
</aside>
First question on StackOverflow.
So, I have a Next App and the Navbar is being imported in the _app.js.
import Navbar from "../Components/Navbar";
function MyApp({ Component, pageProps }) {
return (
<>
<Navbar />
<Component {...pageProps} />
</>
);
}
Color or Navbar links is grey so when it is rendered on the most of the pages it works fine, as the BG is of light color. However, in some pages when navigated the color is not visible.
So, I want to know if there is a way to change the color of the Navbar links only when we are on that page. Like, for example when we visit the page :: http://localhost:3000/model3 , the color of the Navbar links should be white.
I am using the module approach on the Navbar and using sass as the CSS compiler with a Navbar.module.scss
Model3.js
import React from "react";
import section from "../styles/section.module.css";
import S from "../styles/models.module.css";
import E from "../styles/model3.module.css";
import Link from "next/link";
import Head from "next/head";
import { Fade } from "react-reveal";
function model3() {
return (
<div>
<Head SameSite="None">
<title>Model 3 | Tesla</title>
<link
rel="icon"
href="https://www.tesla.com/themes/custom/tesla_frontend/assets/favicons/favicon.ico"
/>
</Head>
<div className={S.Wrapper}>
<div className={S.Maincontainer}>
<div className={S.Container}>
<div className={E.TopSection}>
<Fade bottom>
<div className={section.carname}>
<div className={section.title}>
<h2 style={{ color: "white" }}>Model 3</h2>
</div>
</div>
</Fade>
<Fade bottom>
<div className={E.Details}>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>3.1 s</h3>
</div>
<div className={S.DetailsData}>0-60 mph*</div>
</div>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>358 mi</h3>
</div>
<div className={S.DetailsData}>Range (EPA est.)</div>
</div>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>AWD</h3>
</div>
<div className={S.DetailsData}>Dual Motor</div>
</div>
<div className={S.DetailsContainer}>
<Link href="">
<span>Order Now</span>
</Link>
</div>
</div>
</Fade>
</div>
</div>
</div>
</div>
</div>);}
export default model3;
If there is anything that I should include please let me know. Thank you.
Please check at the top, all the Navlinks in the Navbar are grey, I need to change all of them to white when this page is rendered so that they will be visible
The page looks like this
There are many ways to do that:
you can use your route hooks, React Router has useLocation(), you can verify the location and set a class to modify the behaviour based on the path.
you can send a props to your navbar
you can set a class to the body based on the route and then target your navabar with css .dark .navbar
The best method depends on the structure of your project
I try to make the Gallery.js script appear above the header. I can only make it display next to it, because by default the script takes the whole height. How can I change it?
<div className="App">
<Gallery images={this.state.IMAGES} />
<header className="App-header">
<Link to="/success">
<button variant="outlined">
back
</button>
</Link>
</header>
</div>
.App-header {
min-height: 100vh;
}
.App-header has as min height the full heigth
I'm trying to create a header and sidebar where the header sits just left of the sidebar and not overlayed like the image below.
I've created the Sidebar and Header components separately in different files and am importing both to render into an App.js file like below:
App.js:
render() {
return (
<div className='fp-wrapper'>
<AppSidebar />
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
The issue is that the two components are being rendered ontop of each other (see screenshot). Is there any way to build these components separately and have them fit together?
I have found that one way to solve this is to build the components directly to the sidebar (see Sidebar.Pusher & text Stuff) which is rendered correctly sitting right of the sidebar whereas the header is being overlapped.
Sidebar:
render() {
const { activeItem } = this.state
return (
<Sidebar.Pusher>
<Sidebar
as={Menu}
animation='push'
direction='left'
icon='labeled'
inverted
visible='true'
vertical
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Lexis
</Menu.Item>
<Menu.Item as='a'>
Page 1
</Menu.Item>
<Menu.Item as='a'>
Page 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
Stuff
</Sidebar.Pusher>
One way to do it would be wrapping the <AppSidebar> in a <div className="sidebar"> and use display: flex to display them side by side, like this.
render(){
return (
<div className='fp-wrapper'>
<div className="sidebar">
<AppSidebar />
</div>
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
and add CSS to that
.fp-wrapper {
width: 100%;
display: flex;
flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
width: 30%;
}
.fp-panel-main {
width: 70%;
}
Note: You can also add a className or id to <SideBar.Pusher> and you wouldn't need to wrap the <AppSideBar /> with the <div className="sidebar">.
Why is there white space to the left and right of my div?
render() {
return (
<div className="container intro-body">
<div className="row">
<h2 className="intro-name center-block">TEXT</h2>
</div>
</div>
)
}
And in my css:
.intro-body {
height: 500px;
background-color: #3BC5C3;
}
I've tried to set body to margin: 0 and padding: 0, thinking it had to do with Bootstrap's default values, but it didn't work. I also don't have a container so why does it still have padding?
The issue is the "container" class - Bootstrap also applies a styling of this - use "container-fluid" to get the full width.
render() {
return (
<div className="container-fluid intro-body">
<div className="row ">
<h2 className="intro-name center-block">TEXT</h2>
</div>
</div>
)
}