Hey crew! Long thread, born of exasperation and the desire to be exhaustive in what I’ve tried and researched. Please bear with me.
Tldr; I want to create this effect, but can’t.
The Google Calendar itself stretches responsively with a min width and a no max width. There is a fixed-width menu bar on the side. That’s easy enough to create, and it’s well documented on the forum, with a floating group and a “bumper” underneath. The issue is trying to toggle it.
The “native bubble” solution is obviously collapsing the bumper horizontally when hiding the floating group. But the only way to do that is through the responsive engine and ONLY when viewport < x px. So we can’t toggle that either.
So I tried to recreate it. Bubble’s responsive uses a display:none on the collapsing group, that part is easy. It then recalculates the available space, allows the container on the right to fill it, then assigns widths to each child etc etc. I actually did some css injection, assigning % widths to a few groups, and it worked. But at scale using this method, I might as well be coding my entire front-end.
So my question to @Bubble maybe @neerja can answer is: does a .resize() function exist and is that how you’re recalculating element position? If yes (or if that’s something you’re even willing to disclose), how possible/hard would it be for you to let us add a class to an element, add a listener, and trigger the bubble .resize() when we change an element’s display value or use .show() .hide()?
Alternatively, and since I read that the responsive engine is slated for a rework, are you going with a flexbox-based engine this time around, and should I just be patient while you guys add this long-awaited feature? Do we have a timeframe for release?
Other things that have been tried - in case that’s what you were going to recommend.
@george111 actually wanted the exact same functionality I’m looking for and ended up opting for BDK’s most excellent slideable menu. The issue is that the user will lose the same amount of width on the calendar, as it’s just moving ‘.main-page’ over to the right. Designmodo uses the same trick, but locks the actual page with what looks like some overflow-hidden to prevent the user from thinking that they can continue to use the other part of the page, which is just good UX because you are effectively removing up to half the horizontal real-estate of the page depending on your device ratio. So that’s not quite the same.
I know in the meantime, I can slide an FL over the content and toggle it’s visibility. That’s not the target UX though.
The closest anyone has gotten to horizontal collapsing seems to be @ryan8 with his Created Horizontal Collapsing Repeating Groups it seems he just uses either display:none or $.hide() to the content and an overflow:none to the container with a fixed width. He did not grace us with an explanation though so I’m not sure how he got the other groups to fall into place, when I tried it on .entry level elements, the others just chilled right where they were. Maybe you’re not using nested rg’s? Are you actually building out your own entirely in html? Maybe if you get a minute you could shed some light on this for us.
