Horizontal alignment and responsive settings for floating groups

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?

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…

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.

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?

1 Like

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:

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.

1 Like

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

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 :slight_smile:

Preview:

Editor:

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).

3 Likes

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):

FG1

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

G1

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

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.

1 Like

@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.

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.

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?

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

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.

1 Like

Hi there!

I was stuck with the same issue. In my app i use two floating groups as lateral menus on the left side and right side of my main content.
On large screen it looks like something is broken because the floating group stay on the right and left border of the browser. And I want my mian content to keep a decent width :blush:

The cleaner workaround I found is to set a page width very high.
Put a blank floating group on the left of my real floating group menu. And tweak the responsiveness parameters and conditions to make it resizing on responsive (the blank one not fixed width, the real one fixed width), and hide if not needed.
I have all my content in a group and set the responsive parameters to collapse margin.

If that could help someone :wink: