I'm planning to have a box component. There are some flex items inside it. I'm unable to accommodate all the items in the box. When I reduce width, the box width remains constant and other components overflow. How can I avoid this and fix my code?
Here is the link to my code:
https://codesandbox.io/s/bold-wildflower-l4t9h?file=/src/App.js
You need to use flex wrap if you want to contain it into the flex-box
style={{
display: "flex",
flexWrap:"wrap",
flexDirection: "row",
borderStyle: "solid",
borderWidth: "thick",
boxSizing: "border-box",
margin: "1%"
}}
Related
I have a modal component that overlays my page with a form to make some data inputs.
a second component is rendered next to the form when a certain condition is met (try to fetch data, render if anything is found).
When this happens I would like the whole card containing the two items to expand with some effect (horizontally if on desktop, vertically if on mobile), reducing smoothly the width of the first box during the transion.
I have tried to achieve this using a simple combination of the MUI Grid Container and Grid items,
but with this approach the second item always go on a new line or shows on the right but never changing the modal card overall size.
this is the style applied to the modal card:
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
display: 'flex',
flexDirection: 'column',
transitionDuration: '500ms',
minWidth: '30%'
}}
So I thought of wrapping the 2 brothers in some DIV and apply some custom CSS taking advantage of the transitionDuration to apply an effect. But I couldn't make it work.
here is the style applied to the DIV that wraps the 2 brothers:
<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
this is the div that contains the form grid container (1):
<div
style={{
flexGrow: 1,
minWidth: '30%',
transitionDuration: '500ms',
transitionTimingFunction: 'ease-out'
}}
>
and this is the div that contains the component to be shown when condition is met (2):
<div
style={{
paddingLeft: 10,
transitionDuration: '500ms',
transitionTimingFunction: 'ease-in',
whiteSpace: 'nowrap',
minWidth: condition ? '200px' : '0%',
width: '0%'
}}
>
can anybody point me in the right direction?
I'm new to CSS
Thanks
When you fetch the data you can add a class (.active or something similar)to the parent container as well and add the styles you want to change like
container.active > child{Blahblah styles}
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
This question already has answers here:
Use justify-content: flex-end and to have vertical scrollbar
(6 answers)
Closed 1 year ago.
I have been stuck at this problem for hours now and I need some help. I am trying to create a Chat component and I just want to be able to scroll it vertically. Here's a minimum reproducible example at Codesandbox: https://codesandbox.io/s/reverent-panini-lsbfg?file=/src/chat/ChatHistory.tsx
I have made the container's height fixed (600px) and added the overflow: "hidden" and overflowY: "scroll" styles, but it still does not work, and I have no idea why. Thanks in advance.
Welp, screw CSS. Apparently, it's a CSS bug.
Use justify-content: flex-end and to have vertical scrollbar
All I had to do was to remove justifyContent: "flex-end".
For MUI v5
<Box
sx={{
mb: 2,
display: "flex",
flexDirection: "column",
height: 700,
overflow: "hidden",
overflowY: "scroll",
// justifyContent="flex-end" # DO NOT USE THIS WITH 'scroll'
}}
>
For MUI v4
<Box
mb={2}
display="flex"
flexDirection="column"
// justifyContent="flex-end" # DO NOT USE THIS WITH 'scroll'
height="700px" // fixed the height
style={{
border: "2px solid black",
overflow: "hidden",
overflowY: "scroll" // added scroll
}}
>
I have an image container that wraps dynamic number of circular image components as shown below:
<View style={styles.imageContainer}>
{imageList.map(item=> <Image .../>)}
</View>
container has the following style:
imageContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
flexWrap: 'wrap',
width: '100%',
borderWidth: 1,
paddingVertical: 20,
},
As you can see, since justifyContent is flex-start, it leaves more space on the right than on the left side of the container. I tried doing justifyContent: 'center', but it leaves with the following:
now the left and right spaces are equal, but problem is that the images on the second row are centered, which is not what I want. I want them to align to left just like the first screen shot (but left/right space of the container being equal).
How would I solve the problem?
Thanks!
I'm working on kanban/Trello clone app with Material-Ui,
I tried to display columns horizontally and keep columns the same width.
All columns are displayed horizontally in the same row.
If display area for columns requires to extend browser width, the display area width is automatically adjusted.
The issue is Material UI doesn't allow me to display columns with side scroll.
If I decided the display area directly, like width:2000. the all columns displayed horizontally,
but there is always redundant space.
Because the width is fixed, and we don't know how many columns users create.
What is the solution for this issue?
these are the code I tried.
1/wrapped child with Grid
<Grid container style={{margin: 0,width: "100%"}}>
{children}
</Grid>
2/set style like this
const useStyles = makeStyles({
root: {
display: "flex",
justifyContent: "flex-start",
alignContent: "center",
width: 20000,
overflowX: "auto"
}
3/use Container and Grid
<Container className={classes.container}>
<Grid container direction='row' justify='flex-start' alignItems='flex-start'>
{children}
</Container >
</Grid >
onst useStyles = makeStyles({
root: {
display: "flex",
justifyContent: "flex-start",
alignContent: "center"
// width: 20000,
// overflowX: "auto"
},
container: {
overflowY: "scroll",
whiteSpace: "nowrap"
}
});