Fixed position bottom navigation panel

UI Builder
1

hi ,
How do I use UI Builder to build a bottom navigation toolbar that is “fixed” at the bottom.
Like the “Home, Task, My Taskers …” toolbar shown in the following picture.
image

When i click on the bottom “Task”, I want the upper section will be switched to another page.
After i switched to another page, I want the bottom navigation toolbar to remain at the same position.

Thanks.
Deric

2

Hi , Anybody can help on this ?

3

Hi Deric,

Here’s a general setup I follow to get the behavior you want:

  1. My layout consists of header, workarea and footer blocks. Notice these three blocks are sitting inside of the Workspace block:

    image
    image3142×1782 287 KB

  2. The Workspace block (the one that houses all three core elements) must have the Overflow set to hidden:

    image
    image3140×1778 302 KB

  3. The header block has the Z-Index property set to 1. This helps to keep the block on top when the workarea is scrolled:

    image
    image3136×1778 300 KB

  4. The workarea block must have the following changes:

  • Overflow set to auto - this adds a scrollbar to the workarea section if the vertical space is not enough to render it all
  • Flex grow set to 1 - this stretches the block so it fills up all available space (by pushing out all other blocks to the edges)
  • Flex shrink set to 1 - this ensures that all other components DO stay within the page (as a countermeasure against flex grow.
    image
    image3142×1780 334 KB

Hope this helps!

Mark

4

Thanks Mark.
I still don’t get it working. I want the bottom toolbar to stay when I go from RefuelPage to TaskPage.
image
When i click on “Task” button (bottom toolbar) , it’s routed to page name “TaskPage”.
image
However, But both upper and bottom toolbar disappear.

Below is my setup and config. Anything wrong ?

image
image984×324 44.5 KB

5

At this point you need to replicate it on every page.

Regards,
Mark

6

Ok. Thanks.