Im practicing flexbox and breakpopint in material UI with reactjs and i trying to do something like this:
What i what to do is set my products images and type as column and the product´s price, name, quantity, etc as row
here is my code:
https://codesandbox.io/s/quizzical-bassi-5844oo?file=/src/App.tsx
option 01:
<Box sx={{display: "flex",flexDirection:"row",width:"100%"}}>
<Box sx={{display: "flex",flexDirection:"column",width:"50%"}}>
<span>{product.name}</span>
<span>{product.quatity}</span>
<span>
{product.content?.map((item) => (
<li>{item}</li>
))}
</span>
<span>Remove</span>
</Box>
<Box sx={{display: "flex",flexDirection:"column",width:"50%",alignItems:"end"}}>
<span>item.price</span>
<span>total price</span>
</Box>
</Box>
</Box>
option 02:
<Box
sx={{ display: "flex", flexDirection: "row", width: "100%" }}
>
<Box
sx={{
display: "flex",
flexDirection: "row",
width: "100%"
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "50%",
alignItems: "start"
}}
>
<span>{product.name}</span>
<span>{product.quatity}</span>
<span>
{product.content?.map((item) => (
<li>{item}</li>
))}
</span>
<span>Remove</span>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "50%",
alignItems: "end"
}}
>
<span>item.price</span>
<span>total price</span>
</Box>
</Box>
</Box>
</Box>
Not entirely sure what you're looking for. I'm assuming you want pricing information at the end of the flexbox.
You can reference this site for Flexbox info
I'd say look at Justify-Content - Space-Between, with flex-row orientation.
Related
I am using the MUI V5 in a react project and I am trying to center the logo in an AppBar on extra small screens but no mattter what I do nothing seems to be working. The Typography comonent is wrapped inside a ToolBar wrapped inside an AppBar that only appears on xs screens.
Here's my current code.
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: 'flex', sm: 'none' },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: 'gray',
}}
>
<Toolbar >
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
flexGrow: 1,
bgcolor: 'red',
display: { xs: 'flex', sm: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
LOGO
</Typography>
</Toolbar>
</AppBar>
I have throw everything I can at it but nothing seems to work. Any help is highly appreaciated.
Best Way to handle spacing with MUI is using Grid component.
Your code would be like this:
return (
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: "flex", sm: "none" },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: "gray",
}}
>
<Toolbar>
<Grid
container
spacing={1}
sx={{ alignItems: "center", justifyContent: "space-between" }}
>
<Grid item xs={4} sx={{ textAlign: "start" }}>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
// onClick={handleDrawerToggle}
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
</Grid>
<Grid item xs sx={{ textAlign: "center" }}>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
bgcolor: "red",
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
LOGO
</Typography>
</Grid>
<Grid item xs={4}></Grid>
</Grid>
</Toolbar>
</AppBar>
</Box>
);
MUI Grid docs
Not a big expert in MUI, but try defining the flex direction, then define the align items or justify content to be centre depending on the direction.
I filter and map by array of object and my view is different in some cases.
I want to all possible layout look cool, but in two item look good, in 3 item third took only 50% possible space, in 4th - card actually wrap in two rows, but took only 50% possible space, in 5th item look cool. Cart take their space and last item take all.
<Container style={{display: "flex", flexDirection: "row", paddingTop: "20px", flexWrap: "wrap"}}>
{data.map((z=> (
<Col lg="6" style={{width: "100%", display: "flex", flexDirection: "column", borderStyle: "groove", flex: "40%", marginLeft: "10px", marginRight: "10px", marginTop: "10px", marginBottom: "10px"}} key={z.id} >
<h3> {z.name}</h3>
<span> {z.price}</span>
</Col>
))}
</Container>
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 have seen numerous methods in other stackoverflow questions related to how to change the background color of a Material UI Paper component. However, I'm having a strange issue in that the color will change, but not to the correct color?
Here I am trying to make some grids that I will place widgets in. The background is a Paper component which has the same issue. All the paper components rendered do not match the color requested in the code. I have tried changing it with makeStyles() as well as directly with the style attribute:
const useStyles = makeStyles((theme) => ({
widgetPaper: {
backgroundColor: "#233044",
borderRadius: 25
},
}));
...
<Grid container spacing={0} sx={{ mt: "auto", ml: 1, width: "auto" }}>
<Grid
item
container
spacing={0}
xs={3}
align="center"
sx={{ ml: `${props.dw}px`, mt: 2 }}
>
<Grid item xs={6} align="left">
<Paper
sx={{ height: "95%", width: "99%" }}
className={classes.widgetPaper}
>
<Typography> Test1 </Typography>
</Paper>
</Grid>
<Grid item xs={6} align="right">
<Paper
style={{ backgroundColor: "#233044" }}
sx={{ height: "95%", width: "99%", borderRadius: 1 }}
>
<Typography> Test </Typography>
</Paper>
</Grid>
<Grid item xs={6} align="left">
<Paper
style={{ backgroundColor: "#233044" }}
sx={{ height: "95%", width: "99%", borderRadius: 1 }}
>
<Typography> Test </Typography>
</Paper>
</Grid>
<Grid item xs={6} align="right">
<Paper
style={{ backgroundColor: "#233044" }}
sx={{ height: "95%", width: "99%", borderRadius: 1 }}
>
<Typography> Test </Typography>
</Paper>
</Grid>
</Grid>
<Grid
item
xs={7}
align="left"
sx={{ mt: 2, ml: 1, borderRadius: 1 }}
style={{ backgroundColor: "#233044" }}
></Grid>
</Grid>
The layout renders as expected, however the colors of the paper elements are wrong. I know it is the color of the paper elements specifically, because the last grid item doesn't have Paper and it's color is correct:
In case it is relevant; at the App.js level I am using:
const darkTheme = createTheme({ palette: { mode: 'dark' } });
What is it about Paper elements specifically which is causing this? Am I making a really obvious mistake?
Thank you.
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".