Full width material-ui Button within a Badge?
19,809
Solution 1
you have to apply fullWidth property to badge
<Badge badgeContent={4} color={"secondary"} fullWidth>
<Button variant={"outlined"} color={"secondary"}>
Todo
</Button>
</Badge>
Solution 2
I could come up with a solution using width CSS property:
here is my answer:
const styles = theme => ({
margin: {
margin: theme.spacing.unit * 2,
width: '100%'
}
});
function SimpleBadge(props) {
const { classes } = props;
return (
<Grid container>
<Grid item xs={11}>
<Badge color="primary" badgeContent={4} className={classes.margin} >
<Button variant="contained" fullWidth>Button</Button>
</Badge>
</Grid>
</Grid>
);
}
please find that I have used width: '100%'
in badge styles.
here is a working example: https://codesandbox.io/s/wqm9kmxmql
hope this will help you.
Author by
Duncan Jones
Updated on August 24, 2022Comments
-
Duncan Jones over 1 year
I have a Button inside a Grid and was using
fullWidth
to expand it to fill the container.This worked fine, until I wrapped it in a Badge. Now the fullWidth property is ignored and the button is default width.
Worked fine:
<Button variant={"outlined"} color={"secondary"} fullWidth> Todo </Button>
Now not working:
<Badge badgeContent={4} color={"secondary"}> <Button variant={"outlined"} color={"secondary"} fullWidth> Todo </Button> </Badge>
How can I get the button to expand to fill its parent?
import React, {Component} from 'react'; import Grid from "@material-ui/core/Grid/Grid"; import Button from "@material-ui/core/Button/Button"; import Badge from "@material-ui/core/Badge/Badge"; export default class App extends Component { render() { return ( <Grid container style={{margin: 10}}> <Grid item xs={2}> <Badge badgeContent={4} color={"secondary"}> <Button variant={"outlined"} color={"secondary"} fullWidth> Todo badge </Button> </Badge> <Button variant={"outlined"} color={"secondary"} fullWidth> Todo no badge </Button> </Grid> <Grid item xs={10}> </Grid> </Grid> ); } };
-
Duncan Jones over 5 yearsThis didn't work for me. (Sorry, should have mentioned I tried this)
-
samnu pel over 5 yearsDid you try adding it to badge?
-
Duncan Jones over 5 yearsYes, exactly as you suggest.
-
samnu pel over 5 yearscheck in dev tools is badge width is fullWidth or not? If it is fullWidth and button width is not fullWidth then apply fullWidth property for both.
-
Duncan Jones over 5 yearsEven if I apply it to both elements, it doesn't work. Are you guessing here, or is this working for you locally?
-
samnu pel over 5 yearsits working for me. may be some parent classes doing this.
-
Duncan Jones over 5 yearsI’ve included a failing example in my question.