I have:
<Grid item xs={12} md={6} className={classes.heroGrid}>
<Typography variant='h3' >
Some stuff
</Typography>
<div style={{ display: 'flex' }}>
here
</div>
</Grid>
And heroGrid is:
heroGrid: {
flexDirection: 'column',
justifyContent: 'space-between',
alignContent: 'space-between',
alignItems: 'space-between'
}
But it doesn't push my content to be apart.
The height of the top level <Grid> component is probably being calculated to be exactly the height of the elements it contains.
So, it's pushing all the extra space between the two elements—it just so happens there's 0px of extra space!
You could test this temporarily by setting a fixed height to the <Grid> element with something like:
<Grid item xs={12} md={6} className={classes.heroGrid} style={{height: 500}}>
If you're elements are then pushed apart as desired, you then need to figure out how you want to actually set the height of the Grid element. If it should fill the parent, you could make the height 100%. If it should be a fixed height, you could set it to the specific fixed height.
Related
I've been stuck on this part, and I've been struggling how can I manage to make it row, I tried to make it flexWrap, but it's going down instead of going its side.
<Box sx={{display: {xs: 'flex'},
gap: {xs: '0px', md:'20px',
flexWrap: 'wrap',
alignItems: 'center' }}}
>
{products.map((product) => (
<CardProduct key={product._id} product={product}/>
))}
</Box>
outcome
this is I want to achieve, the first and second product must be align, and then have a gap between or spacing, then the 3rd product will automatically wrap... I tried to call the
flexWrap:'wrap'
but it failed. should I just the height ? or is it because the button is too big?
want to achieve
This is what it looks like when it only have two products
two images
Try using a Grid:
<Grid container spacing={2}>
{products.map((product) => (
<Grid item xs={6} key={product._id}>
<CardProduct product={product} />
</Grid>
))}
</Grid>;
To make 2 columns you can use flex-basis property, flex-basis: 50%; , do remove any padding or margin before.
with flex-basis property you can set any width or get number of columns.
<Box sx={{display: {xs: 'flex'},
gap: {xs: '0px', md:'20px',
flex-basis: '50%',
alignItems: 'center' }}}
>
{products.map((product) => (
<CardProduct key={product._id} product={product}/>
))}
There is on more property in css that helps us to achieve any number of coumns without using flexbox.
.div {
column-count: 2;
}
you can try Grid. Material-UI has a very good and clear example exactly as you want.
link
<Grid container spacing={2}>
<Grid item xs={12}>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value} item>
<Paper className={classes.paper} />
</Grid>
))}
</Grid>
</Grid>
I am trying to create a grid with a bunch of elements but there seems to be a problem when I add spacing to the elements. Here's a picture with spacing={0} on the Grid container:
Grid container with no spacing
Here's the result when adding spacing :
Grid container with spacing = 3
I am trying to keep the grid the same width as the buttons above (see picture). I tried different solutions but it does not seem to work on my side. Here is my code :
return (
<Grid
sx={{
width: "100vw",
overflowX: "hidden",
padding: { xs: "20px", md: "50px" },
margin: 0,
background: "hsl(0, 0%, 98%)",
}}
container
>
<Grid
sx={{ width: "100%", marginBottom: "30px" }}
item
display="flex"
flexWrap={"wrap"}
justifyContent={"space-between"}
gap={"25px"}
>
<SearchInput />
<FilterMenu />
</Grid>
<Grid container spacing={3} xs={12}>
{countries?.map((country, idx) => (
<Grid item xs={3}>
<CountryCard key={idx} country={country} />
</Grid>
))}
</Grid>
</Grid>
The easiest and correct way in my opinion based on your images, would be to separate your Grid containers. One Grid containing the Search and Filter inputs and another to contain your flags. In this way you can keep a better control of your spacing and use let css customisations in the Grid items. Have a look in this codesandbox where i have left a few comments and let me know it it helps.
I have this layout:
So I have three Material UI Columns in a row, which have different widths I don't know in advance. Now I want to place Button ("Create Item") at the bottom of the screen (absolute), but horizontally centered to the middle (i.e. the main) Column. The content of this middle column can be short, or even more than fits on a screen, and is scrollable in that case.
The problem: The Button positioning does not work.
Placing the Button with a fixed position doesn't center it horizontally at the middle column but the screen.
Placing it at the bottom of the middle column's content with a relative position and textAlign: 'center' messes with the button vertical position (it can even get pushed out of the screen if the middle column's content is too long).
Placing it at the top of the middle column with textAlign: 'center', transform: 'translateY(85vh)' looks only nice until you start scrolling down and you see the Button moving up.
How can I achive this "floating" behavior just regarding the vertical position?
Edit - here's a minimal example:
<Grid container>
<Grid xs={2}>
<Box style={{ textAlign: 'center' }}>
<div>Left Column for Navigation</div>
<div>Nav 1</div>
<div>Nav 2</div>
</Box>
</Grid>
<Grid xs={6}>
<Grid
style={{
zIndex: 9001,
position: 'relative',
textAlign: 'center',
maxHeight: 0,
transform: 'translateY(85vh)',
}}
>
<Button>Create Item</Button>
</Grid>
<Box style={{ textAlign: 'center' }}>
<Grid>Main Column</Grid>
<Grid>Many Items,</Grid>
<Grid>it might even</Grid>
<Grid>require scrolling</Grid>
</Box>
</Grid>
<Grid style={{ textAlign: 'center' }} xs={4}>
<div>Right Column For Context-Related Stuff</div>
<Grid>Context Entry 1</Grid>
<Grid>Context Entry 2</Grid>
<Grid>Context Entry 3</Grid>
</Grid>
</Grid>
In this example, the Button "Create Item" would get scrolled away if there where more items in the main column, but I want it floating at a fixed y-position at the screen.
I've been trying to horizontally center a div on the screen of an Iphone. The div is a bit narrower than the phone screen. I have been googling and searching this site and trying every combination of display, flex, margin, width, justify*, align*, placeself, etc. etc. in the container as well as item style and nothing has worked. Here is the code, with all my attempts removed from the style since none of it worked and I assume may interfere with correct solution. No matter what I try, the div just stays on the left side of the screen.
{left} and {right} are divs, with width: 400px
<Mobile>
<Grid container style={{ }} >
<Grid item xs={12} style={{ }}>{left}{right}</Grid>
</Grid>
</Mobile>
const Mobile = ({ children }) => useMediaQuery({ maxWidth: 799 }) && children
Here is what finally worked for me after lots of trial and error.
<Mobile>
<Grid container style={{ justifyItems: 'center', alignItems: 'center', display: 'inline-grid', width: '100%' }} >
<Grid item xs={12} style={{ width: '400px' }}>{left}{right}</Grid>
</Grid>
</Mobile>
To clarify, my question was probably inaccurate. What I needed to do was center the grid item in the grid container.
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.