Forum Academy Marketplace Showcase Pricing Features

Aligning Floating group to right edge in responsive view

Hello All,

I am having a problem keeping a fixed size floating group to the right edge of the screen. Does anyone know how to keep the floating group aligns to the right?

3 Likes

Hey Ali :slight_smile: Is the floating group touching the ride edge of the page in the editor? If so, when does the floating group become misaligned?

Yes,

The floating group is touching the right edge of the editor. The issue occurs in the preview and especially when the responsive engine kicks in if the group is set at fixed width or max stretch of 100%. See images below

In preview mode (because of my high resolution the FG moves to the left of the screen)

The thing is there are no alignment options for FG in the responsive editor

Do you think this is a bug?

Ohh I see. Hmm, I haven’t seen a floating group do that before. Can you share a link to your app?

Use the show FG Button

I think the app is set to private?

try it now

A similar thing happened in my app with groups that overlapped each other. I am pretty sure it’s because the floating group overlaps with the centered, hidden group beneath it (Group Settings_Jurisdictions). If you expanded the width of the page in the editor so that the right floating group is not overlapping with the “Group Settings_Jurisdictions” by default, I think that might do it. I had read in a different forum post that when two groups overlap one another, the positioning of the top group is affected by the alignment and position of the group beneath it.

What you are saying is probably right, but as I understand it floating group are treated differently in the responsive engine, and they are designed to float on top of the others. I wonder if this is a bug?

I am going to change the topic and category to bug.

Right, that’s true about floating groups! My experience was only with regular groups on top of each other. I think it does have to do with overlapping the groups beneath it because I just isolated your floating group on a blank page, and it stayed aligned to the right.

Interesting how it works on a blank page. I think the floating group should have the option to be aligned like other objects. That should solve the problem.

2 Likes

Yes that would be helpful! This post was from a while ago but discussed something similar as well:

Yep seen that before and have also raised the issue with FG in the past. Handling FG is tricky you think you got it right but once you start working with to make a bit personal, it always bites back.

It’s a thing that you love and hate at the same time.

Since you’re here do you think you can offer input on this? Also FG

Exactly, just when you think you’ve got it, FGs will say not so fast. :wink:

Is the example below what you had in mind? Or something different?

Editor:

Preview:
https://forumapp3.bubbleapps.io/version-test/floating_center

*I just noticed that’s probably not what you’re looking for. Since you need it to be above the fold, the only way I can think of is (which sort of looks like it’s centered) is to have the FG float relatively to the top, and be centered in the editor. But this doesn’t cause it to be centered at all times if the page width expands, which changes where the fold begins? Would be curious if anyone can fix my example and has a way to set it up? I’m on a laptop so that example looks centered on mine, but on a desktop that would not look centered.

Ya, that’s the issue, the FG needs to be centered above the fold. If the Width, Height, X, Y coordinates where dynamic and I can determine the height of the fold then with some mathematics, I can center it.

Would you be interested in a custom paid project? Looking for developers…

Sure reach out through direct message.

Can’t seem to find the direct message option, could you direct me where to message you.

Thanks

Just sent you a DM. It should appear as a green badge next to your profile picture

I had a similar problem, i fixed it just by creating a new floating group. Then copying (with workflows) and pasting in the new floating group all the things that were in the previous one.