I am designing a page that needs to be rendered in large, medium and small screens responsively. I am using Material ui Grid container and inside that displaying Chips with style={{ marginLeft: 60 }} from second chip onward to keep a distance between first-second,second-third and so on but as soon as my screen size changes, these chips are getting overlapped on each other but no responsive behavior. Below is my code
<Grid container item xs={12}>
<Grid container item xs={11}>
<Grid item xs={2}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 60 }}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 60 }}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 60 }}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 57 }}>
<Chip/>
</Grid>
</Grid>
</Grid>
How to get my design correct? Please suggest. Thanks..
You're declaring static margin sizes in pixels which will not shrink with the screen size. Either change them to relative sizes (e.g., style={{ marginLeft: '5%' }}), or assign the grids a className property and use media queries in your CSS file to set breakpoints at the required screen sizes.
The latter option will provide you with much more control if responsiveness is a requirement.
Related
I am trying to create a dynamic image list where I can change the number of images that are being displayed, where the images have to occupy the max space in the component without change the image ratio and also without make the component scrollable. The following images show the result that is expected:
Although what really happens now is, in the first case, with only 2 images, it overflows the parent component due to the spacing added between the flexbox elements.
For the 6 images example, it goes worst:
It overflows the parent even more because it ignores the component's max height and always tries to occupy the max width possible.
To reach the correct behaviour, I'm hard coding the flex-basis of the image list for each case because it is a flex item, and only that way does it not grow more than it should. Although, that is not desirable because I want to make the images grow as much as possible without depending on the screen size.
I do not understand why they ignore the parent's max height.
I do not understand why they do ignore the max height of the parent.
Main component:
<>
<Grid
container
direction="column"
wrap="nowrap"
rowSpacing={1}
sx={{ alignSelf: 'flex-end', margin: 0, height: '100%', justifyContent: 'flex-end' }}
>
<Grid
container
wrap="nowrap"
item
sx={{
alignSelf: 'flex-start',
flex: '1 0 auto',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<CustomImageList ref={ref} />
</Grid>
<Grid item>
<CustomPagination onClick={keyMap.move} />
</Grid>
<Grid width="100%" item>
<Stack
spacing={1}
direction="row"
sx={{
overflowX: 'auto',
justifyContent: 'space-between',
'& .MuiFormControl-root': { marginTop: '1px' },
}}
divider={<Divider orientation="vertical" flexItem />}
>
{Buttons.map((button) => (
<Stack spacing={1} flex={1} key={button.buttonId}>
<Stack direction="row" spacing={1}>
{button.text ? (
<ButtonText button={button} />
) : (
<Button />
)}
</Stack>
<Stack spacing={1} direction="row">
<ButtonBox button={button} />
</Stack>
</Stack>
))}
</Stack>
</Grid>
</Grid>
</>
The component CustomImageList is sketch like the next code:
<>
<Stack justifyContent="center">
<IconButton
ref={leftArrowRef}
size="large"
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowLeft',
keyCode: 37,
});
}}
>
<ArrowBackIosNewIcon />
</IconButton>
</Stack>
<ImageList
sx={{
height: '100%',
alignContent: 'center'
}}
cols={imageColumnCount}
>
{images.map((image, index) =>
createOrdinaryListItem(image, index)
)}
</ImageList>
<Stack justifyContent="center">
<IconButton
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowRight',
keyCode: 39,
});
}}
ref={rightArrowRef}
size="large"
>
<ArrowForwardIosIcon />
</IconButton>
</Stack>
</>
The ImageList component is a MUI ImageList
What would be the best approach to create the scenario shown in the first and second figures? I have already tried to create my component. It was a flexbox where I used the breakpoint from the grid to distribute the columns across the images. I had the same behaviour that I presented here.
Sorry about the verbose post and kinda "hard to understand" question, but I was not capable of creating a runnable script to show what is aforementioned
I want to bring these grid items to the same height, but not to stretch them.
This is what it looks like:
This is how I want it:
But I can only do that by manually setting the image width therefore it's not responsive. The users are able to replace this image so setting fixed dimensions is not an option. Any help is appreciated. Here is the minimum code needed to reproduce (I have removed the content within the card to keep the code minimal):
Note: I have used material-ui v4
<Grid container spacing={3}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Grid container spacing={3} className="mb-3">
<Grid item xs={12} md={3}>
<Card
className="justify-between items-center p-sm-24 bg-paper dashboard-card"
elevation={6}
>
</Card>
</Grid>
<Grid item xs={12} md={3}>
<Card
className="justify-between items-center p-sm-24 bg-paper dashboard-card"
elevation={6}
>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card className="bg-paper" elevation={6}>
<CardContent className="flex justify-center">
<img
src={this.state.logo}
alt="logo"
style={{ width: "100%" }}
/>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
</Grid>
I'm not sure if this is the best way but it worked for me. So I'm answering my own question.
Instead of using an image tag, I used the CardMedia component which allows to set the height to match the other cards and it is also responsive.
you might want to display a video or a responsive image. Use the component prop for these use cases
<CardMedia
component="img"
alt="green iguana"
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
/>
More info: https://mui.com/components/cards/#media
I want to align material-ui icon with text such that the icon's lowest drawn point starts exactly at baseline. We're using Material-UI Grid layout.
The problem is: if I allow the icon to align to 'baseline', it is too high. If I do alignSelf: 'center', it is too low. At this point, I'd be ok with some way of absolute positioning the icon to match text baseline, but I don't know if that's possible with flexbox.
<Grid container justify="space-between" xs={6}>
<Grid item>
<Button variant="outlined">Cancel</Button>
</Grid>
<Grid item>
<Grid container alignItems="baseline">
<Grid item>
<Grid container alignItems="baseline">
<Grid item style={{ alignSelf: "center" }}>
<Done />
</Grid>
<Grid item>
<Typography>Done!</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Button variant="outlined">Submit</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</div>
As you can see, the icon is rendered below the baseline, while the text is properly aligned:
You can add a custom relative positioning to manually adjust the position of the checkmark, something like this:
<Done style={{ position: "relative", top: "-1px"}} />
You can change the top property until the checkmark is aligned. If you remove the alignSelf property, you might need to use top: "5px" instead.
I've got this code... I'd like to have one 'column' that is a minimum of 250 pixels wide... I tried the material ui suggestion for sizing: https://material-ui.com/system/sizing/ and didn't seem to have any luck... the 'logo' element will shrink smaller than 250px when the window size shrinks. When that happens, the red grid item (which itself is a grid container with my actual data) obscures the logo.
How can I set the minimum width of a material ui Grid item?
<Grid
container
direction="row"
>
<Grid item xs={3} >
<Box width={250}>
<img src={Logo} key="logo" width="250" height="100" alt="Logo" />
</Box>
</Grid>
<Grid item style={{ backgroundColor: '#f22' }} xs={9}>
<Grid
container
direction="row"
justify="flex-start"
spacing={2}
>
{this.panelGrid(eventID, panelData)}
</Grid>
</Grid>
</Grid>
Just use CSS min-width. The MDN page has details.
<Grid
container
direction="row">
<Grid item xs={3} >
<Box width={250}>
<img src={Logo} key="logo" width="250" height="100" alt="Logo" />
</Box>
</Grid>
<Grid item style={{ backgroundColor: '#f22', min-width: '250px' }} xs={9}>
<Grid
container
direction="row"
justify="flex-start"
spacing={2}
>
{this.panelGrid(eventID, panelData)}
</Grid>
</Grid>
I think you can try this one:
<Grid item xs={3} sx={{minWidth: '250px'}} >
I am trying to understand Material-UI#next grid layout system.
My goal is to have two papers that expand through the whole width screen and break whenever the screen gets smaller to just one paper. The documentation has the following code snippet:
<Container>
<Grid container spacing={24}>
<Grid item xs={12}>
<Paper>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Container>
This results in the following:
I then modified the code to try to achieve my goal of just two papers, as this:
<Container>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
</Grid>
</Container>
But as you can see, this results into two papers which are not taking the whole screen:
Can someone point me to a working example snippet that allows me to have two elements that take the full width?
I suspect the Container component is causing you problems. Since you haven't linked its implementation, see below for a working example of what you want.
Since Material uses flexbox they make use of property flexGrow
The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.
This is the property that governs the growth of elements in the grid.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
},
});
function CenteredGrid(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
</Grid>
</div>
);
}
CenteredGrid.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CenteredGrid);
Best practice is to test out all break points and specify the allocation of space for each screen width.
<Grid item xs={12} sm={12} md={12} lg={6} xl={4}>
</Grid>
xs, extra small 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px.
xl,extra-large: 1920px
https://material-ui.com/customization/breakpoints/
xs Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.
sm Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden.
md Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden.
(and so forth)
more here: https://material-ui.com/api/grid/
For those using Material UI with styled-components, here's how I was able to get the grid items to grow correctly:
import GridBase from "#material-ui/core/Grid";
const Grid = styled(GridBase)`
.MuiGrid-root {
flex-grow: 1;
}
`
Now you can use Grid normally in your components.
I know this is old question , but just want to share.
The problem from your code is spacing={24}
based on documentation Spacing . By default, the spacing between two grid items follows a linear function: output(spacing) = spacing * 8px
e.g. spacing={24} creates a 192px wide gap. so at the end , the space available for the content very small.
<Grid container spacing={2}> // usually 2 or 3 is quite enough for me
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
</Grid>
I was also experiencing this issue. What solved it for me is using the "sx" property to make the width of the parent grid = 100%. See code below:
<Box sx={{ width: '100%' }}>
<Button variant="contained" fullWidth> myButton </Button>
</Box>