Here is the code:
<Grid
container
justify="space-between"
alignItems="flex-start"
direction="column"
xs
spacing={5}
style={{
padding: 10,
}}>
<ParamSelection/>
{
state.selected != -1 && <Grid
container
item
justify="space-between"
alignItems="left"
direction="column"
spacing={5}
style={{width:'350px', marginLeft: '10px'}}>
<DatePickerView/>
}
Inside Param selection again a grid.
<Grid
item
container
justify="flex-start"
alignItems="left"
direction="column"
xs
style={{width: '350px', marginLeft: '10px'}}
>
<Grid item >
<Typography variant="subtitle1" align="left">Select parameter for graph: </Typography>
</Grid>
Currently it's showing like this:
I want select date to be on the same line as select parameter for graph, side by side.
Put both gird-elements in a div and add display:flex to the new-div.
<div class="parent"> <gird>element1</grid><grid>element2</grid>
style:
.parent{display:flex;};
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 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 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 am using MUI with React and I have a <Paper> element which wraps a <Grid> with 3 children elements. When setting the overflowY property of the bottom grid item to "auto", when the content becomes too big, the scroll bar doesn't show up but it breaks the parent container. This is my code:
<Paper
elevation={0}
style={{
height: "776px",
width: 342,
overflowY: "hidden"
}}
>
<Grid
container={true}
direction="column"
style={{ overflowY: "hidden" }}
>
{
<Grid
container={true}
item={true}
style={{
flexGrow: 1,
padding: "16px",
width: "100%",
flexWrap: "nowrap",
position: "sticky",
top: 0
}}
>
{props.pageTitle && (
<Grid item={true} style={{ marginTop: 6 }}>
{!filterOpen && (
<Typography variant="h6">
<span
style={{
paddingLeft: 8
}}
>
{props.pageTitle}
</span>
</Typography>
)}
</Grid>
)}
{props.allowFilter && (
<Grid justify={"flex-end"} container={true} item={true}>
<FmsFilterBox
filterText={filterText}
onChange={setFilterText}
cssFilterBoxWidth="100%"
onFilterOpenChanged={setFilterOpen}
/>
</Grid>
)}
</Grid>
}
<Grid item={true} style={{ flexGrow: 1 }}>
<Divider style={{ width: "100%" }} />
</Grid>
<Grid
item={true}
style={{
flexGrow: 1,
overflowY: "auto"
}}
>
{props.children(filteredData)}
</Grid>
</Grid>
</Paper>
I tried everything but I can't get the scroll bar appear for the 3rd (bottom) grid item (the one rendering {props.children(filteredData)} which is a list with list items fetched from the back end).
If I remove the overflowY: "hidden" from the <Paper>, the content of the 3rd gets hidden, but still no scroll bar - please see the photos attached.
I am really out of ideas, did anyone have this issue before? Thank you.
Fixed it. Apparently I had to add a height of 100% to the upper most grid (main container) and a flex-wrap of "no-wrap".
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'}} >