Hello,
I am trying to modify the image size for a data table that looks like this:
The images are too small. The style options on the right don’t give an option to modify the image size. Is there a way to do this with the Data Table component or do I need to use the Matrix Component?
Best,
Elliott
Hello Elliott!
One way to do that in the datatable is to create a css class in which you will resize the image from there,
In the css class below, we are accessing the image field in the .col-avatar element of the datatable:
self .col-avatar >div >img{
width: 100px ;
height: 100px ;
}
Output:
Hi Fadwa,
Thank you for your response. I recreated what you sent in the screenshots, but I am getting the same results.
I noticed that the syntax highlighting is not the same in mine. Is there anything else I need to do increase the size of the images?
Best,
Elliott
Hello Elliott!
It looks like the issue is that your datatable column is named image instead of avatar.
To target a specific column in a datatable using CSS, you can reference it with .col-columnName. Try updating the .col-avatar selector in your css class with .col-image and see if that resolves the issue.
Hi Fadwa,
That makes sense thank you.
Best,
Elliott
