Scrollbar and scrolling is disable in parent element (with "overflow-y" set to "scroll") inside the component in Router children , Why its behaving like this and how do i prevent it / make it work?
live demo here: https://codesandbox.io/s/priceless-johnson-1fkju
import React from "react";
import { Router } from "#reach/router";
import Chats from "./Chats";
import { TopBar, AndroidControls } from "../components/shared";
const Routing = () => {
return (
<div className="app-wrapper">
<TopBar />
{* <section className="content"> *} // So i tested this, the section element need to be outside of the router comp for it to work , why?
<Router>
<Chats path="/" />
</Router>
{/* </section> *}
<AndroidControls />
</div>
);
};
export default Routing;
The problem is with your CSS
Slightly modify you css
from this
.content {
width: 100%;
height: calc(100% - 22rem);
padding-bottom: 4.9rem;
background-color: #fff;
overflow-y: scroll;
}
to this
.content {
width: 100%;
height: 80vh; /*Changed the height value*/
padding-bottom: 4.9rem;
background-color: #fff;
overflow-y: auto; /*Changed to auto*/
}
CodeSandbox modified
Related
Here's my css code:
.wrapper{
background-image: url(../src/img/wallhaven-6qj55q.jpg);
}
.container{
margin: auto;
width: 50%;
padding: 10px;
margin-top: 25vh;
}
and here's my js code:
import './App.css';
import FormBox from './component/FormBox';
function App() {
return (
<div className="wrapper">
<div className="container">
<FormBox />
</div>
</div>
);
}
export default App;
I'm trying to cover the whole background up but it's only doing partical. What is my issue here?
Try min-height 100vh for your wrapper
.wrapper{
background-image: url(../src/img/wallhaven-6qj55q.jpg);
min-height: 100vh;
}
I'm making a react app that had a successful navigation bar built on react-router. I used CSS modules to compartmentalize the styling which helped. I messed around with React-PDF and after having removed it from my code, my navigation bar now no longer displays properly. It only displays one link and on dev tools, the CSS for the navigation bar and components within it are "undefined". I'd like to know how to revert this back to normal.
Below is my code.
Nav.js
import React from 'react';
import { BrowserRouter as NavLink } from 'react-router-dom';
import navstyles from './navstyles.module.css';
function Nav() {
return (
<div>
<nav className={`${navstyles.navbar}`}>
<h2 className={`${navstyles.navboxhome}`}>
<NavLink
exact to="/"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
Home
</NavLink>
</h2>
<h2 className={`${navstyles.navboxstories}`}>
<NavLink
exact to="/stories"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
Stories
</NavLink>
</h2>
<h2 className={`${navstyles.navboxcontact}`}>
<NavLink
exact to="/contact"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
Contact
</NavLink>
</h2>
</nav>
</div>
);
};
export default Nav;
navstyles.module.css
.navbar {
display: grid;
width: 100%;
height: 10vh;
grid-template-columns: repeat(3, 1fr);
}
[class^="navbox"] {
background-color: greenyellow;
border-radius: 1px;
border-color: black;
border: 2px;
border-style: solid;
display: grid;
/* To place the letter at the center */
place-items: center;
}
.navboxhome {
background-color: skyblue;
display: grid;
place-items: center;
}
.navboxstories {
background-color: skyblue;
display: grid;
place-items: center;
}
.navboxcontact {
background-color: skyblue;
display: grid;
place-items: center;
}
App.js
import './App.css';
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Nav from './Components/Nav';
import Footer from './Components/Footer';
import Stories from './Pages/Stories';
import Contact from './Pages/Contact';
function App() {
return (
<Router>
<div className="container">
<div className="navigation">
<Nav />
</div>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/stories" exact component={Stories} />
<Route path="/contact" exact component={Contact} />
</Switch>
<div className="bottom">
<Footer />
</div>
</div>
</Router>
);
}
const Home = () => (
<div className="subcontainer">
<div className="box-2">B</div>
<div className="box-3">C</div>
<div className="box-4">D</div>
<div className="box-5">E</div>
<div className="box-6">F</div>
</div>
);
export default App;
In nav.js, replace the
import { BrowserRouter as NavLink } from 'react-router-dom';
with
import { NavLink } from 'react-router-dom';
Because BrowserRouter is not used to create a link, instead it is used to wrap your application so that you can use navigation component in react-routed-dom (eg. NavLink or Link).
https://reactrouter.com/web/api/BrowserRouter
Someone plese help, I am unabe to find errors in my code that led the react-router-dom into not working. When I click on any link, URL changes but view doesn't. I've read more than 40 threads and done research but I am unable to find my mistake by my own.
The App.js file
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect, Link } from 'react-router-dom';
import Header from '../components/Header.component';
import Contact from '../pages/Contact.page';
import DivineShop from '../pages/DivineShop.page';
import Events from '../pages/Events.page';
import Forums from '../pages/Forums.page';
import Home from '../pages/Home.page';
import Sadhanas from '../pages/Sadhanas.page';
let App = (props) => {
useEffect(() => {
document.querySelector('#body').style.backgroundColor = '#eee';
document.querySelector('#body').style.color = '#444';
document.querySelector('#body').style.fontFamily = 'aladin';
document.querySelector('#body').style.fontSize = '18px';
},[])
return (
<>
<Header />
<Router>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/forums' exact component={Forums} />
<Route path='/events' exact component={Events} />
<Route path='/sadhanas' exact component={Sadhanas} />
<Route path='/divineshop' exact component={DivineShop} />
<Route path='/contact' exact component={Contact} />
<Redirect to='/'/>
</Switch>
</Router>
</>
);
}
export default App;
The header Component
import React from 'react';
import styled from 'styled-components';
import Nav from './Nav.component';
const HeroSection = styled.section`
background-image: url(${props => props.backgroundImage});
height: 70vh;
width: 100vw;
`;
const Header = (props) => {
return (
<header>
<Nav />
<HeroSection backgroundImage={props.backgroundImage}/>
</header>
);
}
export default Header
The Nav Component
import React, { useState } from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import styled from 'styled-components';
import colors from '../configs/colors';
import Logo from '../images/Logo.svg';
import { FaBars } from 'react-icons/fa';
import { GrClose } from "react-icons/gr";
const StyledLink = styled(Link)`
text-decoration: none;
margin-bottom: .5em;
color: ${colors.black};
padding: .5em;
transition: all .3s ease-in;
`;
const StyledMenus = () => (
<Router>
<>
<StyledLink to='/'>Home</StyledLink>
<StyledLink to='/forums'>Forums</StyledLink>
<StyledLink to='/events'>Events</StyledLink>
<StyledLink to='/sadhanas'>Sadhanas</StyledLink>
<StyledLink to='/divineshop'>Divine Shop</StyledLink>
<StyledLink to='/contact'>Contact</StyledLink>
</>
</Router>
);
const MobileNav = styled.nav`
display: flex;
flex-direction: column;
flex-wrap: wrap;
aligh-items: flex-start;
width: 40%;
position: absolute;
left: 1em;
top: 3.5em;
box-shadow: -5px -5px 5px #f9f9f9, 5px 5px 5px #ccc;
border-radius: 20px;
padding: .5em .2em;
display: ${props => props.visibility ? 'flex' : 'none'};
#media screen and (min-width: 550px){
display: none;
}
& *:hover {
padding-left: 2em;
background: ${colors.chineseYellow};
color: ${colors.queenBlue};
}
& *:first-child {
border-radius: 10px 10px 0 0;
}
`;
const HighResNav = styled.nav`
display: flex;
flex-direction: row;
flex: 1 1 70%;
justify-content: space-evenly;
#media screen and (max-width: 550px){
display: none;
}
& * {
border-bottom: 2px solid ${colors.white};
}
& *:hover{
color: ${colors.queenBlue};
border-bottom-color: ${colors.queenBlue};
}
`;
const StyledFaBars = styled(FaBars)`
cursor: pointer;
font-size: 1.2em;
flex: 0 0 auto;
&:hover{
color: ${colors.queenBlue}
}
#media screen and (min-width: 550px){
display: none;
}
`;
const StyledGrClose = styled(GrClose)`
cursor: pointer;
font-size: 1.2em;
flex: 0 0 auto;
&:hover{
color: ${colors.queenBlue}
}
#media screen and (min-width: 550px){
display: none;
}
`;
const NavContainer = styled.section`
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1em 2em;
justify-content: space-between;
align-items: center;
`;
const Nav = () => {
const [mobileMenuVisibility, setMobileMenuVisibility] = useState(false);
const handleBarClick = () => {
console.log(mobileMenuVisibility);
setMobileMenuVisibility(!mobileMenuVisibility);
}
return (
<NavContainer>
{mobileMenuVisibility ? <StyledGrClose onClick={handleBarClick} /> : <StyledFaBars onClick={handleBarClick} />}
<img src={Logo} alt="Main-Logo" />
<HighResNav>
<StyledMenus />
</HighResNav>
<MobileNav visibility={mobileMenuVisibility ? "true" : undefined}>
<StyledMenus />
</MobileNav>
</NavContainer>
)
}
export default Nav;
Every page have this structure
import React from 'react';
import {withRouter} from 'react-router-dom';
const Contact = () => {
return (
<div>
Hello from contact page
</div>
)
}
export default withRouter(Contact);
Please help
I suspect the issue is that you have two distinct Router components. They are not linked in any way - changing the url in one will not propagate that change to the Switch in the other. Remove the second Router from the StyledMenus component, and move the Header component inside the original Router in App.js.
<Router>
<Header />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/forums' exact component={Forums} />
<Route path='/events' exact component={Events} />
<Route path='/sadhanas' exact component={Sadhanas} />
<Route path='/divineshop' exact component={DivineShop} />
<Route path='/contact' exact component={Contact} />
<Redirect to='/'/>
</Switch>
</Router>
I am working on react project, In that project I have a Parent component that is App.js and for that Child.js is a Child Component.
Now In App.js, I called two times Child.js. Now I have written some css for Child.js so in output two circles will come.
Now I am trying to achieve different background color and different border color for two circles
This is my code
This is App.js
import React from 'react';
import './App.css';
import Child from './Child/Child';
function App() {
return(
<div className="App">
<Child/>
<Child/>
</div>
);
}
export default App;
This is nothing in App.css
This is Child.js
import React from 'react';
import './Child.css';
function Child({ customstyle }) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className="exp">
</div>
</div>
</div>
</div >
)
}
export default Child
This is Child.css
.exp {
height: 100px;
width: 100px;
border-radius: 50%;
border: 1px solid black;
}
If I am not clear with my doubt please put a comment
Create two different styles.
.exp {
height: 100px;
width: 100px;
border-radius: 50%;
border: 1px solid black;
}
.exp2 {
height: 200px;
width: 200px;
border-radius: 20%;
border: 1px solid blue;
}
Pass the class name as a prop to Child component and use it in child component for different styling. Like below:
import React from 'react';
import './Child.css';
import classnames from 'classnames';
function Child({ customstyle }) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className={classnames(customstyle)}>
</div>
</div>
</div>
</div >
)
}
export default Child
I'm building a new project using reactJS, nodeJS, and react-bootstrap. When setting up my landing page. There is a gap in the margin on the right side of the page that won't go away, no matter what I try.
.I've tried including the meyer's reset css file in the index.html.
.I've tried setting margins, borders, and padding on the Body element to zero.
.I've tried setting my Container to width: 100%.
.I've tried resizing the background image.
.I've tried including the bootstrap 4 cdn in my index.html.
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import LandingPage from './components/landingpage';
import Header from './components/header';
import Footer from './components/footer';
import './App.css';
class App extends Component {
render() {
return (
<Router>
<Header/>
<Switch>
<Route exact path='/' component={LandingPage}/>
</Switch>
<Footer/>
</Router>
);
}
}
export default App;
App.css
/* {
box-sizing: border-box;
}*/
body {
background-image: url('./images/background.jpg');
background-repeat: no-repeat;
background-position: center center;
/*background-size: cover;*/
font-family: 'Courgette', cursive;
color: beige;
font-size: 28px;
text-align: center;
max-width: 100%;
margin: 0;
border: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
width: 100%;
}
.courgette {
font-family: 'Courgette', cursive;
}
.lobster {
font-family: 'Lobster', cursive;
}
header.js
import React from "react";
import './header.css';
import { Container, Row, Col } from 'react-bootstrap';
import { Link } from "react-router-dom";
const Header = () => {
return(
<Container className='header'>
<Row>
<Col>
<Link href="#">
<img className='hamburgermenu' src={require('./../../images/navbaricon.png')} alt='Hamburger Menu Icon'/>
</Link>
</Col>
<Col>
<h1>MDNight</h1>
</Col>
<Col>
<p>Hello!</p>
</Col>
</Row>
</Container>
)
}
export default Header;
header.css
.header{
background-color: maroon;
margin: 0;
}
.hamburgermenu {
height: 80px;
width: auto;
}
The header is supposed to extend to the edge of the page, but it does not.
There is any margin gap in the application.