Image resizinig in a row does not work

I want to be able to have a picture next to my answer quizanswers.
It should be maximal as high as the buttons. (I’ve set the image height to 308px (the buttons height) and the width is set to 100%)
Like in this foto, but there cell of the image should be only be as wide as it needs. So that the Buttons are directly next to the picture and the picture is completely at the left with only a margin of 8. So the buttons will resize with the image width.

But if i set the cell width of the image cell to auto px, instead of 50% - 50% it looks like this. The image is very small.

How can i solve this?

Also i set an Radius of 10 for my image, but it isn’t shown in the preview. In preview there is no radius.


It looks like the picture and the buttons are within a container. Is the justify content property of the container chosen to the left?


Hmm about the radius, is the image within its own container? If it is, then both elements should have the radius property set as 10.

Let us know if this helps!

The image is in a cell of a row. And the cell also as the image has the radius 10. I also tried to give the full row the radius 10 too, but it does not help.
I also to the justify content property of the cells to the left, to have the buttons show full size if there is no image, but also this did not work. It’s same result as before.

Apparently there is a bug with the image component radius property, sorry about the trouble! I filed a bug report about it to get it fixed. There’s a couple of workarounds to getting your radius to show:

Remove the image component and put the image as the background of your cell and give the cell the radius 10,
put the image component within a container component, give the container the radius, and select overflow hidden for the container.
use only a container and set its background image as the image you want and determine te container’s radius.

As for the layout, is it possible for you to change the ratio between cells, like maybe 30%-70%? However this might not work if you have different size images, and the buttons would be much wider.

Another suggestion is to not use a row and cells to give a bit more flexibility with the positioning, like aligning everything to the left and use padding between the image and buttons. You could add a container with horizontal layout and put a container with the image and a container with the buttons inside of it. Like this:

For container 1 you can align content to the left and it should have your desired outcome. Hope this helps!

I did not exactly like you’ve said. But it worked. Thanks.