I want to Conditionally Align a Group to the Left

Hello guys, i am new here on Bubble but i have an application i am currently working on, its a recruitment Site.
How do i align a particular group to the left when the condition of the image is Empty that is, once there are no image in the other group, the group should be aligned to the Left to fill up that space…

Once the user did not upload any image, the whole group should align left just like the problem above

See Image Below

You can change alignment of elements inside their container using a condition… but that’s not necessarily relevant here…

…for this case you can just set a conditional on the image, to hide it when it’s empty, and set the image to collapse when hidden (assuming of course the container layout is a Row, which from your screenshot is should be). Then, if the image has no data, it will collapse and the text will fill the space.

Thank you @adamhholmes
Will this work for 2 Groups?
The First Group is Holding the image while the second is the Text and they are both in a ROW Container

Yeah… just set the Group the image is inside to collapse when hidden, and only make it visible when the image is not empty.


112

This is what i did and still getting this result

you need to make sure it’s hidden unless the image is not empty (at the moment you’ve got it visible on page load and when the image is not empty, meaning it will always be visible)…

So uncheck ‘visible on page load’.

I unchecked the PAGE LOAD and i still got the same result. What could be wrong?

No idea…

feel free to share a read-only link to your editor if you want me to take a quick look…

It looks like, for some reason, you’ve set some of the Research image field values in your database to be a link to your Bubble editor…

So, the condition ‘when research image is not empty’ is true (because it’s not empty), and therefore the Gr - Research Image group is visible, although there is no image displayed in the image element because it’s not a valid image (it’s a link to your bubble editor)…

I’ve no idea why you’ve done that (or what you’re trying to do there)… but image fields have to be URLs of valid image files to display…

In any case, on this page (SkillHat | Accelerator Test) which doesn’t have your editor link as it’s image (and therefore has an actual empty image) it’s works as expected…

Except that currently you’ve got the parent group’s container alignment set to be ‘centred’- which I’m guessing is not what you want… so just set the container group alignment to align left (either all the time, or just conditionally when the image is empty)

Let me try that buddy. Thanks i will feed you back

I am using the Image fields to fetch the image back from the Data Type but in case the user did not submit any image then it will not be visible

I mean in the database…

Some of your Accelerator Projects (including the one in your earlier screenshot) have a link to your Bubble editor as their Research Image (which is obviously not a valid image)… hence why the group is still visible (as the image is not empty)…