How to right align image regardless of its width?

[42.decaen]

I am designing the header of an invoice
I want the logo to be displayed on the far top right, regardless of its width. And the dimensions should be max width of 200 and max height of 80, which are the dimensions that I set for the element image.

If the logo is wide, it works perfectly (see example B below). The problem is that if the logo is square, it will center align in this container (see example A below). What I want is that if a logo is square, it will be displayed as in example C below (i.e. right aligned) and I can’t design the containers such that the logo is always right aligned, regardless of whether the logo is wide or square.
image

Some more info on the containers:
black outline: group row
green outline: group column, infinite width
red outline: image, width min=0, max=200, height=80

any ideas how to do that? thank you

[dorilama]

You have 2 options:

• set the parent group of the image to “fit width to content”
• set the image “horizontal alignment” to right

[42.decaen]

@dorilama

set the parent group of the image to “fit width to content”

I’ve tried including the image in a parent container and applying “fit width to content” to that parent container but the logo is not displayed anymore at all, see below:

@dorilama

set the image “horizontal alignment” to right

There is no such option in the image element:

Just to clarify, it’s the user (not me) that uploads their logo so I want to make it such that regardless of the logo they upload, it be right aligned.

[major_groove]

I think it is the alignment of the parent group that you have to set to right.

[boston85719]

Create a container that is a row. Put the another container in that and make it a column. In the column container put your text elements. Then in the row container add the image element. Set the row container alignment property to be spread as far apart as possible (I forget the terminology in the editor but it is the last option in the set of 5 choices)

[42.decaen]

@boston85719

alignment property to be spread as far apart as possible

I think you’re referring to the space between alignment property

I followed your suggestions but as you can see, while the coca cola logo is right aligned, the square logo is still centered aligned in the image element. Did I miss something?
Here’s a link to the editor:

Bubble - Visual Programming

[boston85719]

Your image element itself needs settings on it’s width to ‘fit width to content’ likely so that the image element itself doesn’t stretch it’s width as it does in the second logo.

[42.decaen]

There is no “fit width to content” option on an image element, that is the core of the problem I guess

[S2294]

A workaround is to use a group element instead. Then, as the background of the group, you can select an image.

[snowsnow]

Hi, I have the same exact problem, have you managed to solve it?
Thanks

[42.decaen]

Unfortunately, I haven’t found a solution.
@boston85719 suggested to use the setting “fit width to content” on the image element but that setting does not exist. And @S2294 suggested to use a group element and set the background to be of image type but that does not solve the issue outlined in this post either.

If you find a solution, let me know!