CODEWITHSUNDEEP
cssreactjsflexboxmaterial-uiprogress-bar
Hiimdjango
Hiimdjango

Reputation: 620

Mui LinearProgress Bar stops displaying on display flex

I'am trying to make a custom bullet graph with material UI, my idea is 2 MuiLinearProgress bar next to each other with a vertical Divider in between. I can't seem to find a way to display them next to each other.

<div className={classes.bulletGraph}>
  <div>
   <LinearProgress
    className={classes.firstBar}
    value={80}
    variant="determinate"
    title="test"
   />
  </div>
  <div>
   <LinearProgress
    className={classes.secondBar}
    value={0}
    variant="determinate"
   />
  </div>
</div>

I tried using display flex on the parent but it makes them disappear, I also tried inline block and I got the same result.

Upvotes: 8

Views: 5440

Answers (3)

chaserino
chaserino

Reputation: 304

you can just add flex-grow to each LinearProgress when the parent has display flex:

sx={{flexGrow:1}}

Upvotes: 3

Ben Smith
Ben Smith

Reputation: 20230

You can get the LinearProgress component working with Flexbox as follows:

<div style={{ display: "flex", flexDirection: "row" }}>
 <LinearProgress
  value={80}
  variant="determinate"
  title="test"
  style={{ width: "100%", marginRight: "4px" }}
 />
 <LinearProgress
  color="secondary"
  value={0}
  variant="determinate"
  style={{ width: "100%" }}
 />
</div>

Setting the width to 100% fixes the issue with this component disappearing when used with Flexbox. Note that I'd typically put these styles in a CSS file, but put them in a style property here to keep this snippet simple.

You can see this working here:

Edit mui-linearprogress-bar-stops-displaying-on-display-flex-f5eqi0

Upvotes: 5

m51
m51

Reputation: 2010

Wrap your <LinearProgress> with <Grid> component.

<Grid spacing={1} container>
    <Grid xs item>
        <LinearProgress value={80} variant="determinate" title="test" />
    </Grid>
    <Grid xs item>
        <LinearProgress color="secondary" value={0} variant="determinate" />
    </Grid>
</Grid>

Live demo

Edit romantic-sun-dt6ie

You can set different spacing and ratios beetween items.

Upvotes: 6

Related Questions