I am stuck with a problem of unnecessary scroll in the page and i tried with various option like : Overflow:'hidden' but the problem is other JS component which are wrapped in the same class are looking good:
code with file name MapHome file:
import React from "react";
import {
makeStyles,
withStyles,
Typography,
Container,
Grid,
Box,
Button,
FormControl,
FormHelperText,
FormGroup,
} from "#material-ui/core";
import ellipse53 from '../Images/MapIt/MapHome/ellipse53.svg';
import rectangle13 from "../Images/MapIt/MapHome/rectangle13.svg";
import vector2 from "../Images/MapIt/MapHome/vector2.svg";
import mapIt from "../Images/MapIt/MapHome/mapIt.svg";
import frame214 from "../Images/MapIt/MapHome/frame214.svg";
import frame423 from "../Images/MapIt/MapHome/frame423.png";
import frame426 from "../Images/MapIt/MapHome/frame426.png";
import step1 from "../Images/MapIt/MapHome/step1.svg";
import step2 from "../Images/MapIt/MapHome/step2.svg";
import step3 from "../Images/MapIt/MapHome/step3.svg";
import finalStep from "../Images/MapIt/MapHome/finalStep.svg";
import Preview from "./Preview.js";
import PopupHome1 from './PopupHome1.js'
import PopupHome2 from "./PopupHome2";
//Checkbox library
import Checkbox from '#material-ui/core/Checkbox';
import CircleCheckedFilled from '#material-ui/icons/CheckCircle';
import CircleUnchecked from '#material-ui/icons/RadioButtonUnchecked';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import { Link } from "react-router-dom";
//form Library
const styles = makeStyles({
mapHome: {
minHeight: "1560px",
maxWidth: "1440PX",
overflow: "auto",
},
//*Main Grid
frame751: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "1078px",
height: "1445px",
padding: "80px 181px 157px 181px",
},
//Background vector specification
rectangle13: {
position: "absolute",
left: "40px",
top: "-30px",
zIndex: 0,
},
vector2: {
position: "absolute",
left: "1070.84px",
top: "420.94px",
zIndex: 0,
},
ellipse53: {
position: "absolute",
left: "-100px",
top: "1273px",
zIndex: 0,
},
//1 Subgrid: Name:Map IT and
frame750: {
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "1078px",
height: "649px",
padding: "0px",
marginBottom: "64px",
},
mapIt: {
position: "static",
width: "293px",
height: "112px",
marginTop: "20px",
},
frame749: {
position: "relative",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
width: "1078px",
height: "509px",
padding: "0px",
top:'50px'
},
frame346: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "509px",
padding: "0px",
margin: "0px 142px 0px 0px",
},
frame518: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "254.59px",
height: "241px",
padding: "0px",
margin: "24px 0px",
},
group36: {
position: "static",
width: "254.59px",
height: "185px",
margin: "0px 0px 8px 0px",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
},
frame426: {
position: "absolute",
margin: "58.14px 0px 56px 99.46px",
},
frame517: {
position: "static",
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "space-between",
width: "224px",
height: "48px",
padding: "0px",
},
frame215: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "196px",
padding: "0px",
},
frame216: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "88px",
padding: "0px",
margin:'0px 0px 24px 0px',
justifyContent:'space-between'
},
frame216info1:{
fontStyle:'normal',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
fontFeatureSetting:'ss03 on',
},
frame217: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "301px",
height: "84px",
padding: "0px",
justifyContent:'space-between'
},
frame217info2:{
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
fontFeatureSetting:'ss03 on',
},
frame198: {
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "635px",
height: "448px",
padding: "0px",
justifyContent:'space-between',
},
frame198Title:{
position: 'static',
width: '453px',
height: '48px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '32px',
lineHeight: '48px',
variant:'h3',
fontFeatureSetting:'ss03 on',
color:'#24243F'
},
frame198info1:{
position: 'static',
width: '635px',
height: '64px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '24px',
lineHeight: '32px',
variant:'subtitle',
fontFeatureSetting:'ss03 on',
color:'#2D86D9'
},
frame198info2:{
position: 'static',
width: '635px',
height: '160px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '24px',
lineHeight: '32px',
variant:'subtitle',
fontFeatureSetting:'ss03 on',
color:'#24243F'
},
frame198info3:{
position: 'static',
width: '635px',
height: '128px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '24px',
lineHeight: '32px',
variant:'subtitle',
fontFeatureSetting:'ss03 on',
color:'#24243F'
},
//2.SubGrid: Steps details and Checkbox
frame748: {
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "1077px",
height: "732px",
padding: "0px",
top:'64px'
},
frame538: {
position: "relative",
display: "flex",
flexDirection: "row",
alignItems: 'center' ,
width: "1077px",
height: "300px",
margin:'0px 0px 64px 0px',
left:'81px',
justifyContent:'space-between',
},
frame564:{
position: "relative",
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent:'space-between',
width: "915px",
height: "144px",
padding: "0px",
margin:'0px 0px 8px 0px',
left:'100px'
},
frame663:{
position: "static",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "170px",
height: "280px",
padding: "0px",
marginRight:'78.33px'
},
imageHover:{
"&:hover": {
transform:"rotate(-5deg)",
transition:'0.5s',
}
},
stepInfo:{
display:'flex',
alignItems:'center',
textAlign:'center',
justifyContent:'center',
color:'#000000',
fontStyle:'normal',
fontWeight: 'bold',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
},
frame188:{
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "636px",
height: "400px",
padding: "0px",
marginLeft:'441px'
},
frame597:{
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
width: "636px",
height: "88px",
padding: "0px",
margin:'0px 0px 24px 0px'
},
frame597info1:{
position:'relative',
width:'452px',
fontStyle:'normal',
fontWeight: 'bold',
fontSize: '24px',
lineHeight: '32px',
variant:'h4',
color:'#24243F',
margin:'0px 0px 8px 0px'
},
frame597info2:{
position:'relative',
width:'636px',
fontStyle:'normal',
fontWeight: 'normal',
fontSize: '16px',
lineHeight: '24px',
variant:'body',
color:'#000000',
},
frame331:{
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent:'space-between',
width: "636px",
height: "160px",
padding: "0px",
margin:'0px 0px 32px 0px'
},
frame213:{
position:'static',
display:'flex',
flexDirection:'column',
alignItems:'flex-start',
padding:'0px',
width:'579px',
height:'72px',
},
frame188button: {
borderRadius: "32px",
textTransform:"none",
width:"636px",
height:"64px",
fontWeight: '',
fontSize:"16px" ,
lineHeight: '24px',
variant:'body',
justifyContent:'center',
alignItems:'center',
padding:'10px 20px',
color:'white',
backgroundColor:'#24243F',
margin:'20px 0px 0px -10px',
},
});
// Checkbox Shape and color Customization //
const CustomColorCheckbox = withStyles({
root: {
color: "#BBBECC",
"&$checked": {
color: '#656C88'
},
margin: "16 px"
},
checked: {}
})((props) => <Checkbox color="default" {...props} />);
//schema definiion for Form using Yup
export default function MapHome() {
const classes = styles();
// State definition and handle change for checkbox
const [state, setState] = React.useState({
checked1: false,
checked2: false,
});
const handleChange = (event) => {
setState({
...state,
[event.target.name]: event.target.checked,
});
};
const { checked1, checked2} = state;
const error1 = [checked1].filter((v) => v).length !== 1;
const error2 = [checked2].filter((v) => v).length !== 1;
return (
<div style={{minHeight:'1600px'}} >
<Grid direction='column'>
<Grid item xs className={classes.rectangle13}>
<img src={rectangle13} alt="rectangle 13" />
</Grid>
<Grid item xs className={classes.vector2}>
<img src={vector2} alt="vector 2" />
</Grid>
<Grid item xs className={classes.ellipse53}>
<img src={ellipse53} alt="ellipse53" />
</Grid>
</Grid>
<Container className={classes.mapHome}>
<Grid direction="column" item xs className={classes.frame751}>
<Grid order="0" item xs className={classes.frame750}>
<Grid order="0" item xs className={classes.mapIt}>
<img src={mapIt} alt="MAP IT" />
</Grid>
<Grid
order="1"
item
xs
direction="row"
className={classes.frame749}
>
<Grid item xs direction="column" className={classes.frame346}>
<img src={frame214} alt="20 Minutes 3 Steps" />
<Box className={classes.frame518}>
<Box className={classes.group36}>
<img src={frame423} alt="20 Minutes 3 Steps" />
<img
src={frame426}
alt="20 Minutes 3 Steps"
className={classes.frame426}
/>
</Box>
<Box className={classes.frame517}>
<Preview />
</Box>
</Box>
<Box className={classes.frame215}>
<Box className={classes.frame216}>
<Typography className={classes.frame216info1}>What you will get</Typography>
<PopupHome1 />
<PopupHome2/>
</Box>
<Box className={classes.frame217}>
<Typography className={classes.frame216info1}>What you can use it for</Typography>
<Typography className={classes.frame217info2}>Funding applications</Typography>
<Typography className={classes.frame217info2}>Communication materials</Typography>
</Box>
</Box>
</Grid>
<Grid item xs direction="column" className={classes.frame198}>
<Typography className={classes.frame198Title}>What is this section about?</Typography>
<Typography className={classes.frame198info1}>
In this section you will map the story of your project in order to start measuring the impact of your work.
</Typography>
<Typography className={classes.frame198info2}>
Every project starts with hopes and expectations on how things will work out.
Once we start mapping our assumptions on how the project might progress,
we can begin to visualise our project’s journey, challenges it might face or
the knock on effects it might create.
</Typography>
<Typography className={classes.frame198info3}>
In three steps, you will go through questions modeled on the Theory of Change.
At the end of this section, you’ll get a project narrative written in your own words
and a visual version called ‘Story of Change’.
</Typography>
</Grid>
</Grid>
</Grid>
{/*Subgrid 2: Steps details and Checkbox*/}
<Grid order='1' direction='column' item xs className={classes.frame748} >
<Grid order='0' item xs className={classes.frame538}>
{/*step 1 Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} component='div'>
<Box className="mapHomeImage">
<img src={step1} alt="step 1" className={classes.imageHover} />
<Box className="text" >Step 1 <br></br> About Your project</Box>
</Box>
<Box
className="hide"
mt={-1}
>
<ul>
<li className="li" ><Typography noWrap>Aim and Objective</Typography></li>
<li className="li" >Community</li>
<li className="li" >Result and Impact</li>
</ul>
</Box>
</Box>
{/*step 2 Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} component='div'>
<Box className="mapHomeImage">
<img src={step2} alt="step 2" className={classes.imageHover} />
<Box className="text">Step 2 <br></br> Group Discussion</Box>
</Box>
<Box
className="hide"
mt={-1}
>
<Typography style={{textAlign:'center', marginTop:'16px'}} >Workshop guide for offline preparation</Typography>
</Box>
</Box>
{/*step 3 Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} >
<Box className="mapHomeImage">
<img src={step3} alt="step 3" className={classes.imageHover}/>
<Box className="text" >Step 3 <br></br> Your story of change</Box>
</Box>
<Box
className="hide"
mt={-1}
>
<ul>
<li className="li" ><Typography noWrap>Background setting</Typography></li>
<li className="li" >Timelines</li>
<li className="li" >Enablers & barriers</li>
</ul>
</Box>
</Box>
{/* Final step Image with hover effect, css is defined in App.css file */}
<Box className={classes.frame663} component='div'>
<Box className="mapHomeImage">
<img src={finalStep} alt="final step" className={classes.imageHover} />
<Box className="text">Done!</Box>
</Box>
<Box
className="hide"
>
<Typography style={{textAlign:'center', marginTop:'16px'}} >A visual ‘story of change’ and a textual project narrative</Typography>
</Box>
</Box>
</Grid>
<Grid order='1' item xs className={classes.frame188}>
<Box className={classes.frame597}>
<Typography className={classes.frame597info1}>
Good to have before you start!
</Typography>
<Typography className={classes.frame597info2}>
In this section you’ll get an introduction to Theory of Change. It would be helpful if you had the following:
</Typography>
</Box>
<Box className={classes.frame331}>
<FormControl
required
error={error1}
component="fieldset"
variant="standard"
>
<FormGroup>
<FormControlLabel
style={{display:'table', marginBottom:'16px'}}
control={
<div style={{display:'table-cell'}}>
<CustomColorCheckbox
value={checked1}
onChange={handleChange}
name="checked1"
color="#24243F"
icon={<CircleUnchecked />}
checkedIcon={<CircleCheckedFilled />}
style={{transform: "scale(1.5)"}}
required
/>
</div>
}
label={
<Box ml={2} className={classes.frame213}>
<Typography
variant="body"
style={{color:"#24243F", fontSize:"16px",lineHeight:'24px', fontWeight:"bold"}}
>
A basic overview of your project
</Typography>
<FormHelperText variant='body' style={{fontSize:"16px",lineHeight:'24px',}}>
What is your project about? Who is it trying to help and why? Knowing just the basics about your project is good enough.
</FormHelperText>
</Box>
}
/>
</FormGroup>
</FormControl>
<FormControl
required
error={error2}
component="fieldset"
variant="standard"
>
<FormGroup>
<FormControlLabel
style={{display:'table', marginBottom:'32px'}}
control={
<div style={{display:'table-cell'}}>
<CustomColorCheckbox
value={checked2}
onChange={handleChange}
name="checked2"
color="#24243F"
icon={<CircleUnchecked />}
checkedIcon={<CircleCheckedFilled />}
style={{transform: "scale(1.5)"}}
required
/>
</div>
}
label={
<Box ml={2} className={classes.frame213}>
<Typography
variant="body"
style={{color:"#24243F", fontSize:"16px",lineHeight:'24px', fontWeight:"bold"}}
>
Time for offline activities
</Typography>
<FormHelperText variant='body' style={{ fontSize:"16px",lineHeight:'24px'}}>
You will need some time to have discussions with your target audience or project team members.
</FormHelperText>
</Box>
}
/>
</FormGroup>
</FormControl>
</Box>
<Button variant="contained" className={classes.frame188button} disabled={!(checked1 && checked2)} component={Link} to="/Main/MapItStep1">
Let's go!
</Button>
</Grid>
</Grid>
</Grid>
</Container>
</div>
);
}
I have wrapped this MapHome.js as Route in Main file Main.js:
import '../../App.css';
import MainHeader from '../Header/MainHeader.js'
import MainFooter from '../Footer/MainFooter.js'
import { BrowserRouter as Router,Route, Switch,useRouteMatch } from 'react-router-dom';
import MapHome from '../MapIt/MapHome.js';
import TrackHome from '../TrackIt/TrackHome.js';
import TellHome from '../TellIt/TellHome.js';
import Overview from './Overview.js';
import Contact from '../ContactUs/Contact.js'
import Terms from '../Privacy/Terms.js';
import Privacy from '../Privacy/Privacy.js';
import LandingHome from '../Landing/LandingHome.js';
import ScrollToTop from '../ScrollToTop';
import MapItStep1 from "../MapIt/MapStep1.js";
function Main() {
const { path } = useRouteMatch();
return (
<Router >
<ScrollToTop />
<Switch>
<div className='mainApp'>
<MainHeader/>
<div className="mainContent" >
<Route exact path={`${path}/`} component={Overview}/>
<Route exact path={`${path}/MapHome`} component={MapHome}/>
<Route exact path={`${path}/MapItStep1`} component={MapItStep1}/>
<Route exact path={`${path}/TrackHome`} component={TrackHome}/>
<Route exact path={`${path}/TellHome`} component={TellHome}/>
<Route exact path={`${path}/Contact`} component={Contact}/>
<Route exact path={`${path}/Terms`} component={Terms}/>
<Route exact path={`${path}/Privacy`} component={Privacy}/>
<Route exact path='/Landing' component={LandingHome}/>
</div>
<MainFooter/>
</div>
</Switch>
</Router>
);
};
export default Main;
Below is my App.css file:
.App {
display: flex;
flex-direction: column;
background: #fbf9f8;
position: relative;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: 100%;
width: 100%;
overflow-x: visible;
overflow-y: auto;
}
.mainApp {
display: flex;
flex-direction: column;
background: white;
position: relative;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: 100%;
width: 100%;
overflow-x: visible;
overflow-y: auto;
align-items: center;
},
.mainContent {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
position: relative;
align-items: flex-start;
min-height: 100%;
background: white;
overflow-x: visible;
overflow: auto;
max-width: 1440px;
width: 100%;
}
All the other Components which are wrapped in Main are looking good.
Can anyone help me on this.
Thanks in advance!!
I have found the problem as the problem was with 3 vectors defined which were overflowing out of the page. I have adjusted the margin of those vectors and problem is solved.