Forum Academy Marketplace Showcase Pricing Features

Page layouts for single page application

Need help Mobile
#1

Hi all, I’m creating a single page application (and I’m due to have some coaching soon), prior to my coaching session I’m trying to setup the basic ‘pages’ of the application into a single page application.

I’m stuggling to work out how to define the pages and hoping that somewhere (which I can’t find) there is a handy guid on how to setup the pages efficiently…

in the main many of the pages will not need to scroll vertically or horizontally, however there are a couple of instances when I’m creating a horizontal carousel type feature and one case where if there are multiple entries then a vertical scrolling will be used.

my question(s) are…

for the ‘page’

I’ve set it to be native app in the appearance setting and set the layout to be Row, centre aligned with a preset of mobile and a screen of 340 (width for ui builder) X 620 (min height).

I’m wanting to add it some how so that a couple of the ‘pages’ are vertically scrolling as the content is longer than the page, I’ve tried adding groups that are longer than the page, repeating groups.

is there a simple guide on how to so this, I’ve searched the forum and can’t seem to find something specific on this.

ie, set your page to… then add a … and set it to… then add your content to the … in …

thanks in advance

#2

Hi Robbie,

I may have misunderstood the problem/question, but can’t you just have a main group (you might call it Page Container), probably set to layout column, and with height set to “Fit height to content”?

UK-based (and sometimes in London) if ever you’re interested in some coaching / having a friendly helping hand alongside your development. Would be happy to have a free short session on this one, see if we’re a good match.

James
AppEDGE

#3

@robbie.macintosh

One approach could be to explore how a free template is built and study it. Not necessarily using it for your project (building an app using a template with young Bubble skills may prove to be a steeper hill to climb than needed).

Here is one that I pulled from the templates store and tried it from a mobile device with lateral swiping action which is … nice.

To build an SPA … this series of videos by our Bubble community’s very own @rico.trevisan is an excellent resource:

Enjoy your Bubbling journey! :smiley:

#4

Floating groups and Custom Events are your friend here.

Your parent page format doesn’t matter that much. Mine is set to column, full width, 400px UI builder.

When you want to add a new page:

  1. Create a Floating group where Vertically float relative to = Both, Container Layout = Align to parent, Fixed height = Yes, and Height = 100%
  2. Add groups inside of that floating group to store your page content and format inside there. If i think the content will expand outside the phone height, then I add a group that is Fixed Height at 100%, and Allow vertical scrolling when content overflows = Yes.
  3. If I want to add a header or footer, then I add a group inside the Floating group and make it relative to either the top or bottom.
    There’s a lot of different ways to do this depending on the functionality you’re looking for.

To hide and show the page and make it feel like a native app:

  1. Create two custom eventsand name it “Show [Name of page]” and “Hide [Name of page]”
  2. Inside the custom event, I like to use “NoBounce” animations to hide or show the Floating groups.
    The reason I like these custom events is because there may be many ways to get to the same page in a Single Page App. So this should save you a lot of time and keep the UX constant.

Hope this gives you a good starting point! And keep in mind there are 100 ways to do something and this is just a Dev flow that works well for me.

#5

Thanks for this, as you say there are a 100 ways to doing it and once I find the one that works…

I’ve now got 4 floating groups and the contents all nice and pretty, I’m finding inconsistencies on the workflow to show some of the floating groups when clicking on buttons on some of the others…the inspect is showing what it should be doing but clicking is not refreshing the page to show the element I want to see.

that’s my next lot of reading for the evening.

I’m looking forward to the session I’m lining up with a bubbler, as I think 1 solid day of this will crack most if not all of my requirements.

image