CODEWITHSUNDEEP
reactjsmaterial-uiformsy-material-ui
user460567
user460567

Reputation: 133

How can I make content span the whole page in Material UI?

I am new to material UI and I want to make the content under this tab last the whole page but I am unable to do so. I don't get why it only spans to about 70% of the page.

    <TabPanel value={tabValue} index={3}> 
                    
      <Grid item id="performance" xs={8}>

<Grid sx={{ boxShadow: 5, borderBottom: 1, borderColor: "radial-gradient(90% 100% at 50% 0%, #2d685a 0%, #050606 100%), radial-gradient(90% 100% at 50% 0%, #a86487 0%, #827878 100%), radial-gradient(110% 215% at 100% 0%, #000AFF 0%, #3A5525 100%), linear-gradient(230deg, #000 0%, #09FF04 100%), linear-gradient(130deg, #2D2929 0%, #C4B6FB 100%)" }}>
    <Typography variant="h4" fontWeight="600" paddingBottom="10px" paddingTop="10px" margin="15px" fontSize="22px" align="left" display='inline'>Performance</Typography></Grid>
<div style={{ padding: "15px" }}></div>


<Grid container>
    <Grid item xs={4} style={{ marginBottom: "10px" }}>
        <Typography>Today's Low</Typography>
        <span style={{ fontWeight: "600" }}>{companyOverview.low}</span>
    </Grid>
    <Grid item xs={4}>
        <Slider valueLabelDisplay="auto" min={companyOverview.low} max={companyOverview.high} value={companyOverview.priceclose ? companyOverview.priceclose : 0} />
    </Grid>
 
</Grid>
</Grid>
</TabPanel>

enter image description here

Upvotes: 0

Views: 1295

Answers (1)

Akis
Akis

Reputation: 2252

You are setting your Grid like this

<Grid item id="performance" xs={8}>

Using the xs={8} will constrain your container to not get the full width of your parent container. Use xs={12} or totaly remove the xs property and it should work

Upvotes: 0

Related Questions