I am trying to center a button group using Material UI in React, no matter what i do it floats to the left.
<Container>
<ButtonGroup style={{alignItems:"center"}} color="primary" aria-label="outlined primary button group">
<Button onClick={()=>{setDonation(1)}}>$1</Button>
<Button onClick={()=>{setDonation(5)}}>$5</Button>
<Button onClick={()=>{setDonation(10)}}>$10</Button>
<Button onClick={()=>{setDonation(25)}}>$25</Button>
</ButtonGroup>
</Container>
Here is a picture of the chrome inspector:
You can center the ButtonGroup by applying the following CSS attributes to the container.
const useStyles = makeStyles({
container: {
display: "flex",
justifyContent: "center",
},
});
const classes = useStyles();
<Container className={classes.container}>
<ButtonGroup
color="primary"
aria-label="outlined primary button group"
>
<Button>$1</Button>
<Button>$5</Button>
<Button>$10</Button>
<Button>$25</Button>
</ButtonGroup>
</Container>
There is documentation here too https://material-ui.com/styles/basics/.
Just found out that you can use Box component as a container with all the properties of a div container in css (At least the necesary ones)
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<ButtonGroup style={{textAlign:"center"}} color="primary" aria-label="outlined primary button group">
<Button onClick={()=>{setDonation(1)}}>$1</Button>
<Button onClick={()=>{setDonation(5)}}>$5</Button>
<Button onClick={()=>{setDonation(10)}}>$10</Button>
<Button onClick={()=>{setDonation(25)}}>$25</Button>
</ButtonGroup>
</Box>
Related
This question has probably been answered but i cant seem to find a solution.
I want to remove the default hover state on the CardActionArea component from mui 5. When i hover over the action area, there is a light grey background that i want to remove. Any help is much appreciated.
<Grid container spacing={2}>
{todos.map((todo) => (
<Grid key={todo.db_id} item xs={12} md={4}>
<Card variant='outlined' sx={{ minWidth: 200 }}>
<CardActionArea onClick={() => handleRedirect(todo.db_id)}>
<CardContent>
<Typography variant='h4' color='text.secondary' gutterBottom>
{todo.title}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button
onClick={() => deleteHandler(todo.db_id)}
variant='contained'
size='small'
>
Delete
</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid>
I'm using the styled-components engine for MUI 5, so my answer will be based on that, but I was able to remove the grey hover by accessing the .MuiCardActionArea-focusHighlight, as described on this page:
https://mui.com/material-ui/api/card-action-area/
I was able to remove it with the following code:
const StyledCardActionArea = styled(CardActionArea)(({theme}) => `
.MuiCardActionArea-focusHighlight {
background: transparent;
}
`);
Then just put that component in place of CardActionArea within your code.
I have a Grid container and Buttons as it's children (Grid-items). I want to align Grid-items vertically centered.
Here is the visual representation of my requirement
Here is the markup
<Box height="10vh" mr={4}>
<Grid container justify="flex-end" spacing={2}>
<Button variant="contained" color="default" type="reset">
Reset
</Button>
<Button
type="submit"
variant="contained"
color="primary"
onClick={() => handleSubmit()}
>
Search
</Button>
</Grid>
</Box>;
Can anybody tell me a solution based on material-ui grid API?
I figured out, this should work,
const useStyles = makeStyles({
grid: {
height: "100%"
}
});
export default function Hook() {
const classes = useStyles();
return (
<Box height="10vh" mr={4}>
<Grid
className={classes.grid}
container
justify="flex-end"
alignItems="center"
spacing={2}
>
<Button variant="contained" color="default" type="reset">
Reset
</Button>
<Button
type="submit"
variant="contained"
color="primary"
onClick={console.log}
>
Search
</Button>
</Grid>
</Box>
);
}
Working sandbox, https://codesandbox.io/s/material-demo-forked-m7fyj?file=/demo.js
<Grid
container
direction="row"
justify="flex-end"
alignItems="center"
>
I recommend you to try the Interactive Demo
I would like to center text in a Material-UI button so that the text is centered irrespective of the icon next to it. At the moment the icon is included in the centering.
The top two buttons in the demo show how it currently looks, I am looking for the text to appear as it does in the bottom two buttons. With the icons before and after these buttons respectively, without influencing the text of the buttons.
Bottom two are desired output
https://codesandbox.io/s/material-demo-forked-tj8ko?file=/demo.js
import React from "react";
import Button from "#material-ui/core/Button";
import { makeStyles } from "#material-ui/core/styles";
import KeyboardArrowRightIcon from "#material-ui/icons/KeyboardArrowRight";
import KeyboardArrowLeftIcon from "#material-ui/icons/KeyboardArrowLeft";
const useStyles = makeStyles((theme) => ({
button: {
width: "100%",
marginBottom: theme.spacing(1),
marginTop: theme.spacing(1)
}
}));
export default function IconLabelButtons() {
const classes = useStyles();
return (
<div>
<Button
variant="contained"
color="secondary"
className={classes.button}
startIcon={<KeyboardArrowLeftIcon />}
>
Back
</Button>
{/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}
<Button
variant="contained"
color="primary"
className={classes.button}
endIcon={<KeyboardArrowRightIcon />}
>
Forward
</Button>
<Button variant="contained" color="secondary" className={classes.button}>
Back
</Button>
{/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}
<Button variant="contained" color="primary" className={classes.button}>
Forward
</Button>
</div>
);
}
It's possible to move the icons into the inner html of the button and tweak the margins respectively. It's kind of hacky but solves your problem. I forked your demo with the updates: https://codesandbox.io/s/material-demo-forked-xmltd?file=/demo.js
<Button variant="contained" color="secondary" className={classes.button}>
<KeyboardArrowLeftIcon style={{ marginLeft: -28 }} />
Back
</Button>
<Button variant="contained" color="primary" className={classes.button}>
Forward
<KeyboardArrowRightIcon style={{ marginRight: -28 }} />
</Button>
You can get the same effect while still using startIcon and endIcon by customizing the styles for the start/end icons using withStyles and then using the resulting customized component:
const CenteredTextButton = withStyles({
startIcon: {
marginLeft: -28
},
endIcon: {
marginRight: -28
}
})(Button);
I'm trying to trigger a dialog box to open when a button is clicked so that it takes up half the height of the blue area as shown in the picture below, while the remaining top half will have the backdrop. Currently i'm unable to force the dialog box to open up in the specific area (blue area), instead it takes up the fullscreen and i'm not sure how to change that. I've added a sample code in codesanbox to show what I have done to try to do this: https://codesandbox.io/s/material-demo-rryul
This is an image showing what I would like to achieve
export default function CenteredGrid() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<Grid container spacing={1}>
<Grid item xs={6}>
<Paper style={{ height: 500, background: "blue" }}>
<div>
<Button
variant="outlined"
color="white"
onClick={handleClickOpen}
>
Open full-screen dialog
</Button>
<Dialog
fullScreen
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Sound
</Typography>
<Button autoFocus color="inherit" onClick={handleClose}>
save
</Button>
</Toolbar>
</AppBar>
<List>
<ListItem button>
<ListItemText
primary="Phone ringtone"
secondary="Titania"
/>
</ListItem>
<Divider />
<ListItem button>
<ListItemText
primary="Default notification ringtone"
secondary="Tethys"
/>
</ListItem>
</List>
</Dialog>
</div>
</Paper>
</Grid>
<Grid item xs={6}>
<Paper style={{ height: 500, background: "purple" }} />
</Grid>
</Grid>
</div>
);
}
If anything is unclear, just let me know
The material ui Dialog is rendered as portal. As per doc, Modal component's props are also available to Dialog.
So you can use the Modal's container prop in Dialog and provide a target which indicates where to display the portal.
The container will have the portal children appended to it.
By default, it uses the body of the top-level document object,
Working demo (codesandbox)
dialog style
dialog: {
background: "orange",
position: "relative !important",
height: "100%",
width: "100%",
padding: "100px 0px 0px 0px", //change this based on your needs
backgroundColor: "rgba(0,0,0,0.6)"
}
dialog jsx
...
const container = React.useRef(null);
...
...
<Dialog
container={container.current}//<---here
fullScreen
open={open}
onClose={handleClose}
TransitionComponent={Transition}
className={classes.dialog}
>
...
I have a material-ui card in which it contains image, input field, check-box and a submit button. In which card is displaying onclick on some other option which is not mentioned in the below code. I want to close a card when I click on submit. How can I achieve this?
<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
<CardHeader
style={{
paddingBottom: 0,
paddingTop: 0
}}
title="Image"
/>
<img src="https://unsplash.it/200/?random" />
<CardContent className="details-card-body">
<TextField label="Name" fullWidth />
<Grid container>
<Grid item xs={4}>
<Typography>
New User
<Checkbox
checked={this.state.addNew}
name="addNew"
onChange={this.handleCheckBox("addNew")}
value="new user"
inputProps={{ "aria-label": "Checkbox B" }}
/>
</Typography>
</Grid>
</Grid>
<Button variant="contained" color="primary">
Click to Tag
</Button>
</CardContent>
</Card>
Here below is my code on CodeSandbox
https://codesandbox.io/embed/lppzx48r0m
There are multiple ways to achieve what you want to do
you'll need a flag to conditionally hide or show the card.
For example lets take flag variable in state, and change state variable flag based on submit button and on the basis of this.state.flag you can do
{this.state.flag ?
(<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
//Card content
</Card>)
:
null
}
You can also provide conditional css based on this.state.flag
<Card
className="details-card"
style={{ paddingTop: "0px", display: this.state.flag ? block : 'none'}}
color="primary"
>
//Card content
</Card>
P.S.: The second approach is not recommended because we are rendering element even if it is not needed.