0

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

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
user460567
  • 133
  • 9
  • 1
    put your code in codesandbox. there may be some other issue. also this code is buggy. 2nd line you have added `Grid Item` but it should be inside `Grid Container`. 3rd line you are using `sx` prop, then for typography you are using direct CSS , then again in bottom you are using `style`. I suggest stick to one method. – Prashant Jangam Jul 04 '22 at 20:45

1 Answers1

0

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

Akis
  • 1,806
  • 2
  • 10
  • 12