When I am using the Material UI grid system with a project I am doing using create-react-app. I have two grid items that are adjacent to each other. That look like so:
This is exactly what I want. For some reason; however, when the page loads for a split second the text on the right side gets pushed upward and flashes unstyled like so:
I suspect it is because the image hasn't fully loaded, so the text sits higher up until the image loads. Any advice on how to prevent this or suggestions would be greatly appreciated!!
here is a code sandbox to recreate https://codesandbox.io/s/nifty-jang-kbbty?file=/src/pages/Home.js
if you go from the home page to /portfolio when the code sandbox is in full screen, you will see the flash of unstyled content i am talking about.
<Grid container justify='center' alignItems='center'>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<img src={JobTracker} alt='jobtracker' style={{ width: '100%' }} />
</Grid>
<Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
<Container maxWidth='xs'>
<Typography variant='h3' style={{ textAlign: 'center' }}>
JobTracker
</Typography>
<br />
<Typography variant='body2'>
A platform that allows recent graduates from Wyncode Academy to
track job applications. Technologies used: ReactJS, NodeJS, Google
Cloud Functions, and Google Firestore.
</Typography>
</Container>
</Grid>
</Grid>
In my experience, I usually wrap images in a wrapper has fixed ratio (usually golden ratio for me) to prevent this behavior. This is because, as long as image has not been loaded, the image container (in your case is Grid component) has zero height.
If you use fixed ratio wrapper approach, the image wrapper always have a height. That's it.
You can read more about that technique here: https://css-tricks.com/aspect-ratio-boxes/
Related
I'm building an app with a collection of cards.
I am using React and MUI v5.
I use a grid and I'm having a lot of trouble keeping the image within the size of the grid item. I've tried about every solution I could find, different containers for the image but nothing seems to do the trick.
I also tried object-fit, or putting the image and as a background image of my grid item.
I know this has to do with the parent element not having a fixed dimension.
Is there a way to keep it dynamic while using MUI Grid?
<Grid container item xs={12} border={1} direction="column">
<Grid item xs={2} border={1}>
TITLE
</Grid>
<Grid item xs={5} border={1}>
<img
src="https://mui.com/static/images/cards/paella.jpg"
style={{ maxWidth: "100%" }}
/>
</Grid>
<Grid item xs={3} border={1}>
description
</Grid>
<Grid item xs={2} border={1}>
footer
</Grid>
</Grid>
It looks fine when the display is smaller.
small
But it looks like this when the display is bigger.
big
As i can see image is kind of thumbnail in size, you can add bigger image to get best result for desktop. or You can make the image width 100% in style. As will fill the entire column.
<img
src="https://mui.com/static/images/cards/paella.jpg"
style={{ maxWidth: "100%" }}
/>
I'm trying to get the chart to extend to the bottom only. I tried using a column flex box with height="100vh". However, it's overflowing the screen.
<Flex direction="column" height="100vh">
<Flex flex="1" direction="row">
<div>123456789010 </div>
<Box flex="1">
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<div>| 123</div>
<ThreeDataPoint />
</Box>
</Flex>
</Flex>
I notice that it'll work if I don't have any text above the chart. However, when I put anything above, it will cause it to overflow. It seems to be because the flexbox doesn't notice there's anything above, and is sizing the chart as if there's nothing there.
What could be occurring?
CODESANDBOX HERE
Try configuring the props of your react-financial-charts components.
The auto-sizing behavior of your react-financial-charts package seems to be causing this issue.
When inspecting the page in the browser, you’ll notice that your .react-financial-charts element has a hardcoded height equal to the height of the browser viewport. I had a look at this component with React Developer Tools in Chrome, and it seems to contain an AutoSizer component that may be causing this issue.
You export your BasicLineSeries component this way:
export default withSize({ style: { minHeight: 0 } })(
withDeviceRatio()(BasicLineSeries)
);
So my guess would be that withSize creates AutoSizer, which by default will resize the component to the size of the browser viewport.
The solution would then be to check the documentation for this package and figure out which props you need to use to tell it not to resize automatically.
One solution is to simply add overflow="hidden" prop to your Flex component like this : <Flex direction="column" height="100vh" overflow="hidden">
I am using Material UI with React and wherever I put <Typography> element it gives itself too much height or it is not vertically aligning text inside of it properly. Here are some pictures as examples:
Here is a usage example from one of my screens:
<Typography onClick={() => _redirect("/")} variant="h6" className={classes.title}>
Boardee
</Typography>
classes.title only has a cursor: pointer inside of it.
It is a pretty weird "error". Not sure what to do with it.
This question already has answers here:
CSS text-overflow in a table cell?
(14 answers)
Closed 3 years ago.
EDIT:
I've attached a screenshot. I'd like the text to use only the available space of the grid non scrolling horizontally.
I've this table on React Material-UI library:
<TableRow>
<TableCell component="th" scope="row">
<Grid container wrap="nowrap" direction="row" alignItems="center">
<Grid item>
<img src="https://images-eu.ssl-images-amazon.com/images/I/41pGDPBowuL._SL75_.jpg" alt="NZXT h200i" />
</Grid>
<Grid item xs zeroMinWidth>
<Typography noWrap>This is a very long text to try the x overflow on the table cell that is not working as expected. Can you help me with this?</Typography>
</Grid>
</Grid>
</TableCell>
</TableRow>
Following this tutorial: https://material-ui.com/components/grid/#white-space-nowrap, I'd like to avoid long text wrapping fulfilling the available space and then ellipsizing. Problem is that the text is overflowing x-axis and scroll bars appear. What am I doing wrong? Many thanks in advance.
I made an example on stackblitz.
The problem is that you are using Tables and that is messing up with the Grid style, I tried to identify where to change the style but with no success. Of course it worked with a inline style like style={{maxWidth:"number_in_pixels"}}, but you application would not be responsive.
What I did in the example was remove the Table, and it work like intended:
function YourComponent() {
return (
<Grid container wrap="nowrap" direction="row" alignItems="center">
<Grid item>
<img src="https://images-eu.ssl-images-amazon.com/images/I/41pGDPBowuL._SL75_.jpg" alt="NZXT h200i" />
</Grid>
<Grid item xs zeroMinWidth>
<Typography noWrap>This is a very long text to try the x overflow on the table cell that is not working as expected. Can you help me with this?</Typography>
</Grid>
</Grid>
);
}
If you really need to organize in a list kind of way, I would suggest using a simple list, I used once with cards and it did not messed up the style for me. Or even use pure Grid or Flex Boxes
I am having a little problem using Grid Component in React JS Project, I will start by writing some code and explain after what I want to achieve using images :
let say that this is the code rendered :
<div style="margin:100px 20%; width:80%" >
<Grid container>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
<Grid item xs={6}>
<MyElement
contentLeft="Something displayed in the left"
contentRight="Something displayed in the right"
>
</Grid>
</Grid>
</div>
And here is how it looks let's say ( My Grids in Red and the big div in black ) :
When I resize my window and make it smaller this is how it looks :
I know there is a problem in my proper Element and it is easy because I made its CSS, but I dont know how to control Grids attribute now, because I want that the xs changes from 6 to 12 at a certain position.
How to do so ? if it is not possible, is there a better solution ?
Any help would be much appreciated.
Depends on what size you want it to break from 6 to 12, but it's as simple as putting the right prop values in:
<Grid item xs={12} sm={6}>
Be sure to read the full use case here: https://material-ui.com/layout/grid/