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