I am new to bubble and going through the docs, videos and some courses.
While doing so I want to create a page with a sidebar of 150px width that euqals the total height of the page. For this I use the floating group.
At 15px from the bottom and in the center of this sidebar I want to place a button. This needs to be the case in all responsive views (later on I want to add some collapse functionality to this sidebar to make it hidden and/or 50px wide, but first things first.
The things I am struggling are:
height of the index page. I want the sidebar to be equal to the total height of the screen, but I don’t want a scrollbar on mobile view.
Position of the button. I want to keep this button on the same low position in different responsive views. Again without scrolling on mobile view. Now it is somewhere in the middle of the screen when previewing it. That changes when I increase the hide of the index element, but that again causes a scrollbar on mobile view.
There might be an easier way to do this now, but the way I’ve done this type of thing in the past is with the CSS Tools and Toolkit plugins.
With CSS Tools, for example, you can set an element’s height or width to be a % of the viewport, so you could set the sidebar to be 100% of the height. That’ll solve that piece of the problem and is dead-simple to setup.
Note - you may want to the sidebar to be a group (instead of a floating group) because you don’t need any of the floating capabilities, and you’re setting the height with CSS Tools. Then, you can set the button 15px above the bottom by using a floating group that’s set to be 15px from the bottom on the left.
Additionally, instead you could use Toolkit to calculate how high on the page the button should be (i…e, page height [minus] 15px [minus] height of button). Then, set the y-cordinate to be equal to that using CSS Tools.
I should mention my recollection of the details is a bit fuzzy but I’m quite sure we’ve used approaches like this in the past that have worked so I’m pretty sure there’s a related solution that’d work for your use case.
Thanks! I will keep this solution in mind, but I am wondering if this can be done without scripting in CSS. So truly no code I am thinking to try to put another floating group on the sidebar’s floating group, floats at the bottom of the sidebar. Than I can put the button into this new floating group.
Furthermore my main struggle overall is to decide what height me application needs to be? I just don’t quite understand what the best fixed page height is from a responsive perspective
CSS Tools enables you to make CSS changes without code so setting the height to 100% doesn’t require any code, I believe.
Usually, people set the width of the page (not the height) and then use responsive settings to make it look good when it’s narrower width. I’ve found 1200px is a pretty good width for most web applications.
I installed the plugin and will look into it. As a next step I want to transform the sidebar to a reusable element for making it a main menu. Menu items will have icons + text.
Now as for the UI (desktop first):
At the top right of this sidebar I want to put a Chevron left to collapse the sidebar to the left remaining a width of 50px. The menu items should change by hiding the text label and making the icons bigger and centered
At the top of the sidebar the chevron-left should change to a centered chevron-right. Clicking this Chevron right icon should expand the sidebar menu back to its original state.
Is this possible and what would be the best approach for this. Using a workflow, using conditions, using custom states or a combination of these?
I suspect the easiest solution would be to run a workflow when the chevron is clicked. Within that workflow run two actions:
Set a custom-state for the sidebar so that, yes, isNarrow = yes (you’ll also want to have other elements on the page that show/hide [or adapt in other ways] based on whether isNarrow = yes vs. no, so setting this custom state will trigger all of those changes.
Use CSS Tools to change the width of the group from 150px to 50px.
With the other elements that show/hide… you’ll want to set the chevron-left, for example, so that it’s displayed when the sidebar’s isNarrow = no and you’ll want to change that to chevron-right when the sidebar’s isNarrow = yes. The same type of approach goes for other content you may want within that section.
Thanks again for the clear description. So do I understand it correctly that it is not possible to change a elements dimensions with Bubble’s standard features?
Another approach I was thinking about was to use another floating group “Collapsed Sidebar” which is 50px wide and hidden as standard. When changing the custom state to isNarrow = yes it will hide the default sidebar and shows the collapsed one. Both floating groups have the reusable element “main-menu” in them as a child. I think this then can be done using conditional properties.
This main-menu consists of two groups 1) Big Icon and 2) standard Icon + Label. Based on the custom-state als a show/hide is set as condition on each group.
I was wondering if this is a workaround that could work and furthermore if a custom state’s value will be preserved when changing pages by link?
Yeah, using two different groups sounds like a smart solution.
Elements can be set to change height in Bubble (by showing/hiding groups that have collapsible height), but the width is set based on the width of the user’s viewport (elements widths often vary for different screen sizes/viewports though, and all of this is controlled with responsive settings). Of course, CSS Tools and other plugins enable us to extend the core functionality to resize elements, move them around the screen, provide users with drag and drop capabilities, etc.
Update 3: Solution worked when changing index width to mobile width. Unfortunately resizing back to 980px did put me back to same issue. I have something in my mind to try out. Is that’s not helping, external help would be nice.
Update 2: Solution with shape as a spacer (link below) worked like a charm!
I started to create some core elements on my page. But I can’t get responsiveness to work, regarding the menu-toggle icon.
Desktop
This works as expected.
Floating Group is full width of the page (blue). In here I put a group (fixed width) this contains Logo and App name. After that I positioned the bar icon (fixed width, Fixed left Margin).
Mobile
But on Mobile view I want that the bar icon will be positioned at the right of the screen (maintaining the current fixed position on desktop view. But I get this:
