I'm working with a Material UI template in react JS.
I need to create a div (or Grid in MUI) 100% height of its container, that contains two divs (or Grids) that are 50% of height: if the inner content is heighter than the 50%, than needs to scroll.
I've also tried with sections, but I can't figure out how to do it.
What I came up with is (it's just the right column):
<Grid
container
direction="column"
justifyContent="space-between"
style={{ height: "100%" }}
>
<Grid item style={{ background: "red", height: "50%", overflowY: "auto" }} >
<h1>OKKK</h1>
</Grid>
<Grid item style={{ background: "blue", height: "50%", overflowY: "auto" }} >
<h1>OKKK</h1>
</Grid>
</Grid>
And the result is:
Seems correct, but if I add content to the first div the height is maintained and i can see the scrollbar, but if i add content to the second div, the first div is too height, not 50% of the total height.
How can i solve this?
try adding style={{ height: "100vh" }} on your parent container. That should work. For a better understanding the reasons why, take a look on this very well explained answer http://stackoverflow.com/a/31728799/3597276
you can use Box component inside your Grid :
<Box height="100vh"></Box>
Related
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'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.
So I have the following situation:
From a certain point on the darkblue color of the boxes just doesn't align anymore. These two boxes are currently being rendered in a flex container. What would be a solution for this problem? I want the upper container to always be aligned with the one next to it. It is also possible that it will be more than 2 components next to each other.
Flex container (material ui Grid component uses Flex)
<Box>
<Grid container>
{resultField.fields?.map((blockField, index) => {
return (
<Grid item xs={12} md={6}>
<DarkValueBox label={blockField.label} value={blockField.value} />
</Grid>
);
})}
</Grid>
DarkValueBox
export const DarkValueBox = ({ label, value, index }) => {
const classes = useStyles();
return (
<Box sx={{ borderRadius: 5 }}>
<Box
sx={{
backgroundColor: "#0A7BB1",
color: "#fff",
px: 2,
py: 3,
borderRight: "1px solid #fff",
}}
>
<Typography fontWeight={600} variant="subtitle1">
{label}
</Typography>
</Box>
<Box sx={{ px: 2, py: 2, border: "1px solid lightgrey" }}>
<Typography variant="subtitle1">
{value}
</Typography>
</Box>
</Box>
);
};
Here's a codesandbox where I recreated the problem:
https://codesandbox.io/s/add-material-ui-forked-ge42z?file=/src/index.js
An approach would be - if you do not want to cut the labels for showing the user as much information as possible - to ensure the blue box is always taking the height of the highest container in the row.
You can do this with adding a wrapper class to the container DarkValueBox with following specification:
wrapper: {
height: "100%",
display: "flex",
flexDirection: "column"
}
Then, tell your box class to take 100%:
box: {
backgroundColor: "darkblue",
border: "1px solid grey",
color: "white",
wordBreak: "break-word", // btw: its `break-word`, not `word-break`
height: "100%"
},
That is it, find it working in a forked sandbox:
https://codesandbox.io/s/add-material-ui-forked-24zg7?file=/src/index.js
Ok, so I was going through your Sandbox and instead of writing the code I decided to point you in the right direction.
You have declared a Grid with material UI which is a type of container similar to FlexBox.
You have not declared a size or width for the box or the containers inside.
Once you set the grid size and wrap direction for the outer 'main' container you will be able to set the sizes for the containers inside, your label boxes.
This will align them.
For the text, there is a 'textOverflow' property which will stop any additional text wrapping over the component and instead replace it with '...'
Material UI Grid - https://mui.com/components/grid/
Textoverflow - CSS: text-overflow: ellipsis with reactJS and IE
I'm trying to display a CircularProgress centered inside material UI TableBody. The below is what I have tried, but it's not centered as I expected. (Please note that only relevant code has been posted)
const styles = (theme) => ({
progress: {
width: "100%",
display: "flex",
justifyContent: "center",
minHeight: "10vh",
alignItems: "center"
}
})
<TableBody>
<div className={classes.progress}>
<CircularProgress />
</div>
</TableBody>
It looks like this, but I want it to be centered in the TableBody. Currently, it only takes the width of the first column.
Here your div extends 100% to the parent which is TableBody you can make table body 100% or give position: 'absolute' to div
I have a Grid container which contains 2 Grid items. I've set the height of the container and the second Grid item to 100%. The height of the second Grid item is exceeding the height of the container and a scroll appears.
Here is the code if it helps.
function App() {
return (
<Grid container style={{height: '100%'}}>
<Grid item xs={12} style={{border: 'solid 1px'}}>
Header
</Grid>
<Grid item xs={12} style={{height: '100%', border: 'solid 1px'}}>
Content
</Grid>
</Grid>
)
}
https://codesandbox.io/s/8k0xy60nx2
How do i make the second Grid item occupy the remaining height of it's container and not exceed it? What am i missing here?
Thanks.
Try this with direction="column",
<Grid
container
direction="column"
style={{ border: "solid 5px", height: "100%" }}
>
<Grid
item
style={{ border: "solid 1px", backgroundColor: "yellow" }}
>
Header
</Grid>
<Grid
item
xs
style={{ border: "solid 1px", backgroundColor: "red" }}
>
Content
</Grid>
</Grid>
Edited Sandbox
Hope this helps...
Notice the the parent container is overflowed with the height of the first item. It's because you set 100% height for the second item but you actually have 2 items in your parent. The sum of items need to be eqaul or lower if you don't want scroll bar. Try to set the height of the first item for 10% and the second for 90%. The scroll will disappear
Man! This is annoying.
I hacked on the codesandbox a bit to make it closer to my view on this problem.
MDN / Web tech / CSS / max-height says that if a percentage is supplied, it
defines the max-height as a percentage of the containing block's height.
I spent an hour walking up and down the dom tree in the Chrome dev tools styles debugger, and you can see where the vh sized elements toward the root are the expected height, then the Mui Grid shows like max-height 100%, height: 3319px