Just a thought here; why don’t we incorporate anchor points to elements. For example anchoring an element to the right/left of the screen. Anyways this just a thought that can add an improvement as currently all elements are anchored to the left of the page. Filemaker implements this like this
http://www.filemaker.com/help/12/fmp/html/edit_layout.10.9.html
Have you tried using the Floating Group? That’ the point of it.
That’s not what i mean sorry! The floating group stays in the location you define while what i mean by anchoring is that each element adjusts in size according to where its anchored.
For example if it’s anchored to the right then it will always stay to the left alignment while stretching (responsive)
I will install filemaker and update an example here. give me a couple of mins
Ok this is what i mean. The resizing of the element can be anchored to the width of the page, or maybe a group
@josh For my money, as a complete non-coder, non-designer, I have decided to use Google Material Design principles for my web app. As such, the ability to create set sized elements (especially buttons, but also “cards”, popups etc) would be awesome.
@josh Just to be clear here, we won’t need to rebuild existing apps completely, just check that everything is working OK on each old page after “converting” it to new pages? So data transfer is not an issue at all ??
@lonetour yes, that’s right. There are a few things that are definitely going to break and that you’ll need to rebuild on each page – mainly stripes, since in the new system you can achieve the same effect just using groups and shapes – but for the most part each page you convert to the new system should mostly just work.
Yes, the ability to create a “set” of elements of a fixed size would be awesome.
Okay, @Kfawcett, here’s an example of building a sidebar layout in bubble. Thanks for bringing this up… I had to add a bit of functionality to floating groups to make this work, so I’m glad you asked!
Here’s the demo:
https://forum_app2.bubbleapps.io/version-test/responsive_sidebar
Note that the sidebar grows and shrinks to maintain the same margin above and below it, and that it can be scrolled, similar to how https://material.angularjs.org/latest/ works (you could stick the logo in the space above the sidebar, and a footer below it, if you wanted). Also, once the page gets too narrow, the sidebar disappears altogether.
You can see how I build it here: https://bubble.io/page?type=page&name=responsive_sidebar&id=forum_app2&tab=tabs-1
@josh, this is how it’s looking on my browser (Chrome / Windows 7).
Also looking in the editor, the sidebar doesn’t span from top to bottom of the page
Why can’t you just change the Width and Height attributes to have a selection menu for px or %?
Yikes, that first screenshot does not look right at all – will debug and see why that’s happening.
In the second screenshot of the editor, the space above and below is deliberate: it’s to show that you can have fixed height elements above and below a flexible-height sidebar. You could also draw it flush against the top and bottom.
Will think about adding explicit percent settings. Not sure how that would work with overlapping elements or elements breaking onto different lines, or the height of elements’ contents changing.
@josh, if DIVs are relative or static they shouldn’t break out of the parent with explicit percentage, correct? It seems most of the objects we draw are set with absolute positioning. Is there a way to use relative or static positioning as you place one object in another?
Maybe there could be an “advanced” setting that allows the more technical user to control the positioning, and other settings, instead of having everything positioned absolute?
@josh, any idea/timeframe of when to expect being able to allow hand-built HTML to integrate with Bubble?
Cheers!
@josh, here’s a suggestion… In Bubble, allow us to set our own Breakpoints with the freedom to re-arrange elements per Breakpoint… Just a thought.
We just pushed that. let us know how this go (edit mode viewer won’t work great with repeating groups though, it’s better to test in run mode).
If I’m trying to use responsive for mobile will it still work? I’m having issues with repeating groups actually being responsive in native mode.
i agree with bam. repeating groups still don’t work right on mobile
How do we use breakpoints?? I can’t find it anywhere…
@lonetour, Bubble doesn’t allow you to control the breakpoints right now. It’s all done dynamically.
