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%" }}
/>
Related
I am working on a react native app, and one of the component looks like this -
<ScrollView>
<Image style={{height: '60%'}}/>
<View />
<View />
<View />
<View />
<View />
<ScrollView>
So, when my scrollview height is auto, and when I set the height of Image component (which I have to), the Image is taking up 60% of scrollview height, and some of the Views underneath Image are getting cut off. Therefore, scrollview is not scrolling beyond that point.
Note: The Image height cannot be changed from relative to absolute values as they are coming from a different server.
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/
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/
I have four rows and two columns.I need to display the background image to full grid.Please provide me solution.I had referred this creating background image in content page link:Xamarin Forms - how to add background image to a content page
.But how to set background image to grid layout.
Just add the Image to the first row and column, set ColumnSpan and RowSpan to cover your entire grid and set the Aspect to AdjustFit.
Then you add the other items you want to add to the grid.
A grid cell can hold more than just one element, however keep in mind that the last item in a cell will end up on top of the items having been added earlier.
For example:
<Grid>
<Image>
<Button>
</Grid>
The button is the last item in the order, so it will become the topmost item and be clickable. If you had the button first and the image last, the image would cover the button, which therefore would not be clickable.
You will have to do some AbsoluteLayout trickery here:
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" AbsoluteLayout.LayoutFlags="All" InputTransparent="true" Source="Your_Image" Aspect="AspectFill" />
<!--Your Grid Here-->
<Grid AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" />
<AbsoluteLayout>
See to it that you place the image first in absolute layout so that it goes in the back,
and set its input transparent so it does not take any click events.