Home > Software engineering >  How do I make a one of my elements in react position without overlapping using Grid Component?
How do I make a one of my elements in react position without overlapping using Grid Component?

Time:11-09

I have 3 components on my react page PageHeader,SideMenu & FeatureList (which is made up of Display Cards) here are the components below:-

App.js

import './App.css';
import { Grid } from '@mui/material';
import SideMenu from './components/home/SideMenu';
import Features from './components/home/Features';
import PageHeader from './components/home/PageHeader';

function App() {
  return (
    <Grid container spacing={10}>
      <Grid item xs={3}>
        <PageHeader></PageHeader>
        <SideMenu></SideMenu>
      </Grid>

      <Grid item xs={8}>
        <Features></Features>
      </Grid>


    </Grid>
    // <div>
    //   <PageHeader></PageHeader>
    //   <SideMenu></SideMenu>
    //   <Features></Features>
    // </div>
  );
}

export default App;

PageHeader.js

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { Grid } from '@mui/material';

var LOGGED_IN = false

const getButtons = (LOGGED_IN) => {
    if (LOGGED_IN) {
        return <Grid container>
            <Grid item xs={7}></Grid>
            <Grid item xs={2} >
                <Button color="inherit">
                    <Typography variant="h6" component="div">
                        Profile
                    </Typography>
                </Button>
            </Grid>
            <Grid item xs={2} >
                <Button color="inherit">
                    <Typography variant="h6" component="div">
                        Logout
                    </Typography>
                </Button>
            </Grid>

        </Grid>
    }
    else
        return <Grid container>
            <Grid item xs={9}></Grid>
            <Grid item xs={2}>
                <Button color="inherit">
                    <Typography variant="h6" component="div">
                        Login
                    </Typography>
                </Button>
            </Grid>
        </Grid>
}


const drawerWidth = 240

export default function PageHeader(props) {
    return (
        <Grid item container>
            <Grid container>
                <AppBar
                    sx={{
                        width: { sm: `calc(100% - ${drawerWidth}px)` },
                        ml: { sm: `${drawerWidth}px` },
                    }}

                >
                    <Toolbar>

                        <Grid item xs={4}>
                            <Typography variant="h3" component="div">
                                Stonks!
                            </Typography>
                        </Grid>

                        {getButtons(LOGGED_IN)}

                    </Toolbar>
                </AppBar>
            </Grid>
        </Grid>
    );
}

SideMenu.js

import * as React from 'react';
import { Divider, Drawer, Grid, List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
import { styled, useTheme } from '@mui/material/styles';
import BusinessIcon from '@mui/icons-material/Business';
import ShowChartIcon from '@mui/icons-material/ShowChart';
import AppsIcon from '@mui/icons-material/Apps';
import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
import InfoIcon from '@mui/icons-material/Info';
import CreateIcon from '@mui/icons-material/Create';




const DrawerHeader = styled('div')(({ theme }) => ({
    ...theme.mixins.toolbar,
}))

const drawerWidth = 240

export default function SideMenu(props) {

    const theme = useTheme();
    const [open, setOpen] = React.useState(true)

    const handleDrawerOpen = () => {
        setOpen(true)
    }

    const handleDrawerClose = () => {
        setOpen(false)
    }



    return (
        <Grid container spacing={2}>

            <Grid item xs={12} container direction="column">
                <Drawer
                    sx={{
                        width: drawerWidth,
                        flexShrink: 0,
                        boxSizing: 'border-box',
                        '& .MuiDrawer-paper': {
                            width: drawerWidth,
                            boxSizing: 'border-box',
                        },
                    }}

                    variant="persistent"
                    anchor="left"
                    open={true}
                >
                    <Grid item xs={0} container display='flex' alignItems='center' justifyContent='flex-end'>
                        <DrawerHeader display='flex'>
                        </DrawerHeader>
                    </Grid>
                    <Grid item xs={0}>
                        <Divider />
                    </Grid>
                    <Grid item container direction='column'>
                        <List>
                            {
                                ['Companies', 'Exchanges', 'Sectors', 'Users'].map((text) => (
                                    <Grid item xs={12}>
                                        <ListItem button key={text}>
                                            <ListItemIcon>
                                                {(() => {
                                                    switch (text) {
                                                        case 'Companies':
                                                            return <BusinessIcon />
                                                        case 'Exchanges':
                                                            return <ShowChartIcon />
                                                        case 'Sectors':
                                                            return <AppsIcon />
                                                        case 'Users':
                                                            return <SupervisedUserCircleIcon />
                                                    }
                                                })()}
                                                {/* <MenuIcon /> */}
                                            </ListItemIcon>
                                            <ListItemText primary={text} />
                                        </ListItem>
                                    </Grid>
                                ))

                            }
                        </List>
                    </Grid>
                    <Grid item>
                        <Divider />
                    </Grid>
                    <Grid item container direction='column'>
                        <List>
                            {
                                ['About', 'Creators'].map((text) => (
                                    <Grid item xs={12}>
                                        <ListItem button key={text}>
                                            <ListItemIcon>
                                                {(() => {
                                                    switch (text) {
                                                        case 'About':
                                                            return <InfoIcon />
                                                        case 'Creators':
                                                            return <CreateIcon />

                                                    }
                                                })()}
                                                {/* <MenuIcon /> */}
                                            </ListItemIcon>
                                            <ListItemText primary={text} />
                                        </ListItem>
                                    </Grid>
                                ))

                            }
                        </List>
                    </Grid>
                </Drawer>
            </Grid>

        </Grid>
    );
}

Features.js

import { Grid } from "@mui/material";
import React from "react";
import DisplayCard from "./DisplayCard";
import company from '../../static/company.jpg'
import stock_exchange from '../../static/stock_exchange.jpg'
import sector from '../../static/sector.png'
import user from '../../static/user.png'


export default function Features(props) {
    return (
        <Grid container spacing={3}>
            <Grid item md={3}>
                <DisplayCard name="Companies" brief="View All the Registerd Companies and Click on them to explore each of them in
                                        detail" image={company}></DisplayCard>
            </Grid>
            <Grid item md={3}>
                <DisplayCard name="Stock Exchanges" brief="View All the Registerd Stock Exchanges and Click on them to explore each of them in
                                        detail" image={stock_exchange}></DisplayCard>
            </Grid>
            <Grid item md={3}>
                <DisplayCard name="Sectors" brief="View All the Registerd Sectors and Click on them to explore each of them in
                                        detail" image={sector}></DisplayCard>
            </Grid>
            <Grid item md={3}>
                <DisplayCard name="Users" brief="View All the Registerd Users and Click on them to explore each of them in
                                        detail" image={user}></DisplayCard>
            </Grid>
        </Grid>
    )
}

DispalyCard.js

import React from "react";
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { Button, CardActionArea, CardActions, Grid } from '@mui/material';


export default function DisplayCard(props) {
    return (
        <Grid container spacing={2}>
            <Card sx={{ border: "groove", maxWidth: 300, maxHeight: 400 }}>
                <CardActionArea >
                    <Grid item xs={12}>

                        <CardMedia
                            component='img'
                            height='140'
                            image={props.image}
                            width='inherit'
                        />
                    </Grid>
                    <Grid item container>

                        <CardContent>
                            <Grid item xs={12}>
                                <Typography gutterBottom variant='h4' component='div'>
                                    {props.name}
                                </Typography>
                            </Grid>
                            <Grid item xs={12}>
                                <Typography variant='body2' color='text.secondary'>
                                    {props.brief}
                                </Typography>
                            </Grid>
                        </CardContent>
                    </Grid>
                </CardActionArea>
                <Grid>
                    <CardActions>
                        <Button size='small' color='primary'>
                            Click Here
                        </Button>
                    </CardActions>
                </Grid>
            </Card >
        </Grid >
    );
}

Currently my output is

As u can see the Feature Cards are getting overlapped by the Header

I want to make them not overlap but I have tried a lot of things but as I am a beginner in Grid & Flexbox im not able to make it correct

Any help will be appreciated.

CodePudding user response:

It looks like you have your header set to position: fixed which removes it from the normal flow of the page. There may be a more elegant solution but so far the best solution for me has been adding the following to my CSS:

body {
  padding-top: *height of header*;
}
  • Related