Horizontal alignment and responsive settings for floating groups

[sridharan.s]

What are some effective ways to management the alignment of floating groups so that it works well on a responsive page and fits with the rest of the page?

For example, I’ve got a group that I’d like to be a floating group (see image below) and have it stay on the left side of the middle 1200px with the rest of the content on the page. However, it seems to be aligned left by default and I don’t seem to have a way to group it with the other content to keep the all 3 columns centered together.

Any good solutions for this?

[BubbleCoach]

I came across the same issue. I was able to center my floating header by luck. Floating group alignment is still fuzzy to me. I am interested as well…

[paritosh.mehta19]

I put a group inside the floating group, and then put any content inside this group. Now you get the option to define the horizontal alignment on the group in the responsive page. You can give it a try too. If you need further clarification, let me know.

[sridharan.s]

When I add a group within the FG, the FG behaves as a regular group. So, this solves my responsive / alignment problem but also means the group doesn’t float anymore.

Any way to get both at the same time?

[paritosh.mehta19]

I have a different observation. In my case it continued to be a floating group. I guess, there might be some mismatch in the way we intend to use the floating group I assume.

If you check out this page on my site:

Crispy Corn | Your Veg Recipe

I have set a floating group in the right side column. The floating group is invisible during the initial page load, but after the user scrolls up to a certain length, I make the FG visible. Also, the FG is only visible if the screen width is greater than 1100 (desktop’s only). (The floating group is displaying an ad on the site, so if you have an adblocker on your browser it will not load. Please whitelist the site and reload).

I initially had trouble with the horizontal alignment based on different browser resolutions, but now it seems to be okay with the approach I highlighted above.

Alternately, do you have an editor link to a page where you are trying this, I could try and take a look to see if your implementation is similar to mine. If you don’t want to have a public link, please share it as a DM.

[sridharan.s]

Thanks for sharing @paritosh.mehta19. Yeah, that’s the same core behavior I’m looking to create but am having trouble doing so.

Could you show me a screenshot of your editor for that FG / Group? …perhaps I’m just misunderstanding what you did to create this behavior.

Thanks!
Scott

[fayewatson]

Hey Scott! I couldn’t quite get this to work without setting the repeating group to fixed width, but just wanted to send this along incase it’s helpful

Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - faye-demo-app

In this example, the ‘browse’ and ‘getting started’ groups are within a single floating group (set to float:top). On top of that, is another floating group (set to float: nothing), containing the infinite scroll repeating group. The rg floating group is on top of the sidebars floating group so that the User can still click on elements within the repeating group, while the browse/getting started floating group moves underneath it.

The horizontal alignment of the browse and getting started groups should be ‘in line’ with the repeating group as the page width decreases, since its width is equal to the page width. There is also a third floating group, which is the height and width of the page for the page background color (set to float:both).

[paritosh.mehta19]

Hi @sridharan.s,

Here you go. The settings I have done are as follows:

Floating Group (2 screenshots - couldn’t take a complete screeshot due to the screen resolution):

Then I have created a group inside the FG. Make note, that under the responsive tab, I have set the group as center alignment.

You can then have any element in this group: Again have that center aligned.

Hope this helps. In case you need anything more, let me know.

Cheers,
Paritosh

[sridharan.s]

Thanks @fayewatson. Super helpful, as usual. I appreciate it. Very creative solution. I think the center column not being responsive makes it less viable for us for now as that’s more valuable to users, I assume, than having the left nav float. But, I’ll keep an eye out for related solutions. You’ve given me a few things to think about, which is very useful. Thanks!

@paritosh.mehta19, I can’t get your approach to work in my app. I wonder if there’s something else that you did that caused bubble to treat it this way on your page. For me, whenever I have a floating group it doesn’t respond to responsive as a group would, which makes it hard to include anywhere that’s not on the left edge or right edge.

[paritosh.mehta19]

@sridharan.s, Yes the floating group doesn’t directly respond to the responsive settings like a group. That is exactly why I have a group inside the floating group. I think you missed the setting where the width of the floating group is 330 (without any max width), and that of the group is 310 (Set to 100% max width And center aligned). So, now if you look in the responsive tab at a resolution width more than your typical page width, the floating group will wider than what it typically is, but the group inside it will be of the same size aligned centrally.

I had a lot of issues myself to be able to get this to work in the beginning; after a lot of trial and error I managed to make it to work as I desire.

[sridharan.s]

Okay, I think I understand what you’re doing.

In fact, I tried something similar today but set the inner group to fixed width and right aligned. After a quick test, it was apparent that my FG was increasing in width quicker than the space available for it. So, there may be a solution here, but it’ll take a fair amount of fiddling with to get right.

[gaudenz]

Great solution, @fayewatson! However, it is not suited for mobile view due to the fixed width of the center element. Would you have an idea for that?

[vovazk]

Yes but the rest of the floating group (with the transparent backround) will make the area under it unclickable. At least that’s what I ended up with. Maybe this could be fixed with some z-index juggling.

Yeah, seems like I’m not the only one who ran into this: Floating group alignment

[paritosh.mehta19]

Yes, that’s correct. In my case, I didn’t have to worry about the text below, so it worked for me. Maybe the BDK Floater plugin could help, haven’t tried it though.