How can I place a button next to typography tag inside a paper container, aligned to right/end?
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Paper className={classes.paper}>
<Typography inline>CPU</Typography>
<IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
</Paper>
</Grid>
</div>
Here my styles:
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
padding: theme.spacing(2),
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
color: theme.palette.text.secondary,
}
}));
I'm using the inline attribute of Typography but the button keep going on the next line...many thanks, I'm a newbie.
If you don't mind adding more dom elements.
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Paper className={classes.paper}>
<Grid container alignContent="space-between" alignItems="center">
<Grid item>
<Typography inline>CPU</Typography>
</Grid>
<Grid item>
<IconButton className={classes.button} aria-label="Add" size="medium" ><AddIcon /></IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</div>
Otherwise you can just change CSS propertie
paper: {
padding: theme.spacing(2),
color: theme.palette.text.secondary,
display: flex,
alignContent: 'space-between',
alignItems: 'center'
}
Related
If I use grid within toggle buttons then OnChange event doesn't work
With using Grid or Stack event works fine
How I can arrange 2 by 2 buttons
I can't see any example on this on material ui website
Can anyone please help
const [testTime, setTestTime] = useState<string | null>('1');
const handleTestTime = (event: React.MouseEvent<HTMLElement>, newTime: string | null) => {
console.log(newTime);
setTestTime(newTime);
};
<Box>
<Typography variant="body2">
Toggle Button
</Typography>
<ToggleButtonGroup
value={testTime}
exclusive
onChange={handleTestTime}>
<Grid container spacing={1}>
<Grid item xs={6}>
<ToggleButton value="earlymorning">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Early Morning</Typography>
</Stack>
</ToggleButton>
</Grid>
<Grid item xs={6}>
<ToggleButton value="morning">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Morning</Typography>
</Stack>
</ToggleButton>
</Grid>
<Grid item xs={6}>
<ToggleButton value="afternoon">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Afternoon</Typography>
</Stack>
</ToggleButton>
</Grid>
<Grid item xs={6}>
<ToggleButton value="evening">
<Stack direction={{ xs: 'column' }}>
<Typography variant="body2">Evening</Typography>
</Stack>
</ToggleButton>
</Grid>
</Grid>
</ToggleButtonGroup>
</Box>
The toggle buttons aren't designed to wrap. You can however make them wrap with:
<ToggleButtonGroup
sx={{ flexWrap: "wrap"}}
...>
Here is an example:
https://codesandbox.io/s/happy-https-366fsv?file=/demo.tsx:775-798
However, you'll see the spacing is a bit off, and so is the border on the item where the column breaks. I'd love it if someone had a clever way to make this look good too-
I have the following material UI grid code (copied from their documentation and adjusted to show the problem I'm having):
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
tall: {
height: 400,
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container>
<Grid item container xs={4}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.tall}>xs=6</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
</Grid>
<Grid item container xs={8}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
</Grid>
</Grid>
</div>
);
}
The issue I am having is that it is adjusting the height of the second column based on the first column, as you can see in the image below. I'd like the xs=6 tiles in the second column to be directly stacked one on top of the other. How do I do this?
adding to the highest grid container: alignItems="baseline" seems to have done the trick
I have the following code in reactjs using material ui theme
const useStyles = makeStyles((theme) => ({
root2: {
maxWidth: 345,
flexGrow: 1
},
paper2: {
padding: theme.spacing(1),
color: theme.palette.text.secondary,
}
})
<div className={classes.root2}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper2}>
<Grid container alignItems="center" spacing={3}>
<Grid item>
<h3>Instructions</h3>
</Grid>
<Grid item>
<IconButton>
<ExpandMoreIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</div>
What i want is
I saw an example at https://material-ui.com/system/flexbox/#flex-grow
which uses the code:
import React from 'react';
import Box from '#material-ui/core/Box';
export default function FlexGrow() {
return (
<div style={{ width: '100%' }}>
<Box display="flex" p={1} bgcolor="background.paper">
<Box p={1} flexGrow={1} bgcolor="grey.300">
Item 1
</Box>
<Box p={1} bgcolor="grey.300">
Item 2
</Box>
<Box p={1} bgcolor="grey.300">
Item 3
</Box>
</Box>
</div>
);
}
I am new to material ui. Here the example uses Box instead of Grid.
So which is the best way to handle this
I am used to bootstrap 4: IN bootstrap4 i can do this same thing using
https://getbootstrap.com/docs/4.4/utilities/flex/#justify-content
<div class="d-flex justify-content-between">...</div>
How to do something like this in material UI
Adding justify="space-between" to Grid container component will solve your issue.
Please refer this.
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper2}>
<Grid container alignItems="center" justify="space-between">
<Grid item>
<h3>Instructions</h3>
</Grid>
<Grid item>
<IconButton>
<ExpandMoreIcon />
</IconButton>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
I am trying to make a grid of buttons aligned in specific order, but I am having difficulties with making both buttons on the same row:
Expected:
Instead, row2 (the two columns in red), appear in a column direction (the second column goes bellow the first columnt, screenshot: http://prntscr.com/x4amxf) and not in a row direction like I am expecting them to be.
Here is my grid:
<Grid container direction="column"> // this is another container that wraps everything, not in the picture above
<Grid item container direction="row"></Grid> // another row of stuff, not related, works just fine
// picture represents this grid
<Grid item container direction="row" spacing={1}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
</Grid>
</Grid>
</Grid>
I have tried to increase xs to 2 to see if its a size issue, but it just stretched the items.
And the actual code (but the structure above represents the same):
<Grid container direction="column">
<Grid item container>
</Grid>
<Grid item container direction="row" spacing={1}>
<Grid item>
<AddPrice open={open} handleClosePopup={handleClose} item={item} />
<IconButton variant="contained" onClick={handleClose}>
<AddCircleOutlineIcon color="primary" style={{ fontSize: 40, marginRight: 5 }} />
<Typography>Цена</Typography>
</IconButton>
</Grid>
{item.prices.map(({ price, quantity }) => (
<React.Fragment key={`itemPrice1${price}`}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item>
<Button>
<Grid item direction="column" container>
<Grid item>
<Typography variant="button">{price} лв.</Typography>
</Grid>
<Grid item>
<Typography variant="button">
{quantity.available} {item.quantity.type}.
</Typography>
</Grid>
</Grid>
</Button>
</Grid>
</Grid>
{editing && (
<Grid item container direction="column">
<Grid item>
<IconButton style={{ border: "1px solid #f44336" }} variant="contained" color="secondary">
<DeleteForever color="secondary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
<Grid item>
<IconButton style={{ border: "1px solid #3f51b5" }}>
<EditIcon color="primary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
</Grid>
)}
</Grid>
</React.Fragment>
))}
</Grid>
<Grid item container></Grid>
</Grid>
Basically, the editing buttons, should appear on the right of the price buttons.
Sandbox: https://codesandbox.io/s/material-demo-forked-6v50s?file=/demo.js
If I understood the task correctly, you have to refactor your layout like this:
<Grid container direction="column">
<Grid item container direciton="row">
Row1
</Grid>
<Grid align="center" direction="row" container>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>BR</Grid>
<Grid item>TXT</Grid>
</Grid>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>EDIT</Grid>
<Grid item>DELETE</Grid>
</Grid>
</Grid>
</Grid>
Please, check out the example
The following grid structure in my Material-UI collapsible is my desired layout:
Desired grid layout
I already tried changing the layout by playing with the flex-direction.
https://codesandbox.io/s/epic-nobel-ov48j
When I click on the checkboxes, the last checkbox tends to "jump" from its position away and stacks itself under the other two ones. At the moment I can't find the reason why. You can see the result of this behaviour on this picture:
Undesired grid layout
On smaller screens this behaviour would be okay but especially on larger screens I want the two columns layout where the first one contains two checkboxes and the second contains the third one.
Try this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>Exmaple text</Typography>
<Grid container justify="space-between" direction="row">
<Grid container item justify="space-between" xs={6}>
<Grid container item style={{ alignItems: "center" }} direction="row">
<Grid item xs={6}>Text Supervisor</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid container item xs={6} style={{ alignContent: "center" }} direction="row">
<Grid container item style={{ alignItems: "center" }}>
<Grid item xs={6}>Text Employee</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
</Grid>
</ExpansionPanelDetails>
I'm rather new to this js / material-ui / react thing, so you probably might improve it even further.
#Radosław Cybulski: Thank you for your help. With your code and some modifications I was able to get it to work. You don't have to specify direction="row" because it is the default settting.
Now it looks like this:
<ExpansionPanelDetails className={classes.details}>
<Typography paragraph>
Example text
</Typography>
<Grid container justify="space-between">
<Grid container item xs={6} md={3}>
<Grid
container
item
style={{
alignItems: "center",
paddingBottom: "8px",
}}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Supervisor
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="supervisor" />
</Grid>
</Grid>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
Text Employee
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Grid
container
item
xs={6}
md={3}
style={{ alignContent: "center" }}
direction="row"
>
<Grid
container
item
style={{ alignItems: "center" }}
>
<Grid
item
xs={6}
style={{
textAlign: "right",
paddingRight: "16px",
}}
>
{useTranslation("employee")}
</Grid>
<Grid item xs={6}>
<CustomCheckBox employeePosition="employee" />
</Grid>
</Grid>
</Grid>
<Hidden smDown>
<Grid container item md={6} />
</Hidden>
</Grid>
</ExpansionPanelDetails>