Center vertically

The option to center an item vertically within it’s parent element would be amazing. From what I can tell currently the only option is “Center relative to parent”, but that just centers the item horizontally.

7 Likes

2nd this.

Yes that’s an easy one, we’ll add that shortly.

4 Likes

Awesome! Thanks for the quick response.

It’s pushed :slight_smile:

4 Likes

Awesome! Thank you!

Have you a example? Distribute H and V, how it work?

Centered Horizontally - equal space on left and right of image that is contained within the blue group.

Centered Vertically - equal space on top and bottom of image that is contained within the blue group.

3 Likes

Thanks again!

Well this Thread is a golden oldie. I actually came here for dynamic vertical centering for an element within a group, meaning when the groups on the right are hidden the element still searches the verical center point:

.
Can this be done without adding empty groups around the element?

Hello everybody,
Just trying this again, does anybody have an idea about my question right above here :arrow_up:?

Fro extra information: To the right you see multiple groups that will be shown or hidden depending on choices of the user and the parent group of all elements you see here will change it size accordingly. I want the ‘Search’ square you see to the left to always find the vertical center of this parent group. Currently I achieve this by surrounding the search square with empty groups and then hiding/showing them, but there probably is a more elegant way to achieve this.
Any ideas?

Darn, this is a seriously unpopular question.

Please berate me if this question is so stupid it is not even worth answering ( and then point me in the so completely obvious direction while rolling your eyes).

Also if I do find the solution myself I will add it here with a good couple of keywords, as I have found many times the completely obvious small things which apparently do not even have to be mentioned in manual orBubble references, can have you searching for a long time.

And of course, a Happy New Year to everybody here!

We have advanced 6 month in time…perhaps now somebody knows how you can get dynamic vertical alignment :yum:?

I don’t think there is a really good way to do this. Anyone have an idea?

1 Like

Hi J805,

Thanks for working on this, I super appreciate it!

I made a gif to show you the problem:

When you look at the icons, you see that when I check the box a text appears with extra input box, or an image appears causing the icons not to be vertically centered anymore. Because it can be anything that appears ( I mean this is dynamic, depending on the user), working with invisble groups and hidding and showing them is really cumbersome. Just have not found an other way yet to do it :slight_smile:

Really appreciate you attempt ( which you edited out later :wink: )

1 Like

It has been one year ago I posted my variation of this issue…and until now nobody has been able to crack it, it must be one of the most complicated issues on Bubble, probably nearly impossible to solve!

( see what I am trying to do here :face_with_hand_over_mouth:)…

Sure would be nice to get a good fresh new hint

Have you tried using the hero sizing element in @AliFarahat toolit plugin ?

I believe it will serve your goal.

Thanks for the suggestion, going to look into it!

I believe you can achieve this without hero sizing plugin…not sure, but I think hero sizing is more about placing an image to be stretch across the screen as in a “hero image”

https://www.w3schools.com/howto/howto_css_hero_image.asp

I think for your problem you should place the icon into a group that is the same height as the group where the extra checkbox would appear. Then the icon groups container should also have a hidden spacer, so the height of the container group containing the icon will have a dynamic height always equal to the group with the extra check boxes.

Then your icon should always stay in the same Y position in it’s container group even when that groups height gets expanded or contracted.

Much the same way you use the collapse height when hidden for those extra checkboxes, you just do that for a group to act as a spacing element to maintain your vertical alignments. Set conditionals on the spacer elements to be shown when the extra checkbox is shown.

Dude you’re patient… I’ve seen all your attempts to revive this post :hushed:

My suggestion would be to have a little javascript code that reposition the left group everytime a group on the right is clicked.
The code would look at the parent height and center the left group according to it.

1 Like