I am using material UI version 5 and use a Card module.
On my Card I have something like the:
<Card sx={{minWidth:100}}>
....
<CardMedia
component="img"
image={imageUrl}
sx={{
objectFit: "contain",
padding: 0,
margin: "16px 0",
maxWidth: "100%",
height: "auto",
}}
/>
</card>
Now, assume I have many of these Card blocks inside a div that has a flex display with display "nowrap".
What I want is that when someone changes the window size, the number of the cards in the viewpoint will be always the same and basically just the card becomes bigger when changing the window size.
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}
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 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>
Stack: Meteor + React + MUI
Here's my full code of my 'main' renderer components:
// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS
render() {
return (
<div className = "container">
<AppBar title = "test" />
<Tabs /> // Tab contents goes here
<RefreshIndicator
left={70} // Required properties
top={0} // Required properties
status="loading"
style={{
display: 'inline-block',
position: 'relative',
margin: '0 auto' }} />
</div>
);
},
I want to make Refresh Indicator horizontally center aligned beneath of myTabs like this whirling circle in this picture :
In the document of MUI here, this indicator comes with following styles:
display: 'inline-block',
position: 'relative',
With this styles I cant align it center horizontally, and without this styles, I can`t even locate it where I wanted.
What I have tried :
margin: 0 auto --> failed
text-align: center --> failed
display: flex --> failed
combination of 1 & 2 --> failed
left={$(window).width/2-20} --> This works but I'd like to use CSS only
The solution below centres progress indicator without any hacky calculations that cause element to be offset:
<div style={{display: 'flex', justifyContent: 'center'}}>
<RefreshIndicator status="loading" />
</div>
Here is how I did to ensure it's horizontally centered. Works great for me.
Set the parent component style to position: 'relative'.
Set the refresh indicator style to marginLeft: '50%', and left={-20} (assuming the size is 40).
here is the code (I put it in a CardText component).
...
<CardText style={{position: 'relative'}}>
<RefreshIndicator
size={40}
left={-20}
top={10}
status={'loading'}
style={{marginLeft: '50%'}}
/>
</CardText>
...
In MUI v5, there is a Stack component which serves as a flexbox container. By default the direction is column, to center it horizontally you can set alignItems to center:
<Stack alignItems="center">
<CircularProgress />
</Stack>
Live Demo
circularprocess in material ui and text middle of page stackoverflow
<div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
<CircularProgress />
<span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
</div>[![enter image description here][1]][1]
The Backdrop Component will place the progress indicator in the center and also can add a dimmed layer over your application. This component is available with MUI V5.
<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>