nehatkhan Comments - Answer Overflow

nehatkhan

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers HHono

•Created by nehatkhan on 6/30/2023 in #front-end

Need help with the layout problem. the content of the main section is going below the sidebar.

This is the code of my app.js file file, where I put the sidebar and topbar so that It can be accessed on every page.

import { Box, Container, Grid, Typography } from "@mui/material";
import React from "react";
import SideNav from "../../components/nav/SideNav";
import TopNav from "../../components/nav/TopNav";
import { OverViewCard } from "../../components/overview/OverViewCard";

const Dashboard = () => {
  return (
      <>
      <Box sx={{display:'flex'}}>
        <Box component="main" sx={{py: 8, flexGrow:1 }}>
          <Container maxWidth='lg'>
            <Grid container spacing={3} sx={{justifyContent:'center', flex:1}}>
              <Grid item sm={12} md={6} lg={4}>
                <OverViewCard />
              </Grid>

              <Grid item sm={12} md={6} lg={4}>
                <OverViewCard />
              </Grid>

              <Grid item sm={12} md={6} lg={4}>
                <OverViewCard />
              </Grid>
            </Grid>
          </Container>
        </Box>
        </Box>
        </> 
  );
};

export default Dashboard;

import { Box, Container, Grid, Typography } from "@mui/material";
import React from "react";
import SideNav from "../../components/nav/SideNav";
import TopNav from "../../components/nav/TopNav";
import { OverViewCard } from "../../components/overview/OverViewCard";

const Dashboard = () => {
  return (
      <>
      <Box sx={{display:'flex'}}>
        <Box component="main" sx={{py: 8, flexGrow:1 }}>
          <Container maxWidth='lg'>
            <Grid container spacing={3} sx={{justifyContent:'center', flex:1}}>
              <Grid item sm={12} md={6} lg={4}>
                <OverViewCard />
              </Grid>

              <Grid item sm={12} md={6} lg={4}>
                <OverViewCard />
              </Grid>

              <Grid item sm={12} md={6} lg={4}>
                <OverViewCard />
              </Grid>
            </Grid>
          </Container>
        </Box>
        </Box>
        </> 
  );
};

export default Dashboard;

` This is the code of dashboard where I am displaying the cards.

4 replies

KPCKevin Powell - Community

•Created by nehatkhan on 6/30/2023 in #front-end

Need help with the layout problem. the content of the main section is going below the sidebar.

sorry sir, I forgot to paste that. just now I did that

4 replies

KPCKevin Powell - Community

•Created by nehatkhan on 6/21/2023 in #front-end

what this triangle share in bottom middle of the image called. I want to make this

lol didn't a that name so called it triangle. Thank you I will search it

4 replies

KPCKevin Powell - Community

•Created by nehatkhan on 6/21/2023 in #front-end

what this triangle share in bottom middle of the image called. I want to make this

*shape

4 replies

KPCKevin Powell - Community

•Created by nehatkhan on 6/16/2023 in #ui-ux