Set container at the bottom of the screen

1

I’m making a custom navbar for my android app, and it requires me to set a container that stays at the bottom always.
I achieved this by binding the X and Y padding to the formula that will dynamically change based on screen sizes. However, it has proved to be less efficient and honestly feels like a lot of work to me.

Is there any other way to set a container at the bottom of the screen always?/

Thanks for taking your time :smiley:

2

This issue appears on the forum each few weeks/months.

To make an absolutely positioned navbar in the bottom you have to follow these steps:

  1. Set the styling tab of the page layout to:

    image
    image363×547 11.5 KB

  2. Place a scroll view onto your page (that will be your page content container)

  • set the width and height of it to “Custom” and both values to “Grow to…”
  1. Place your absolutely positioned container in the bottom, following the scroll view. From this point onwards you have your navbar positioned on that one page.

If you have another page where you need the same setup, you need to follow the same steps.
Also note that navigating with the “open page” flow function will cause your navigation to also animate with the content of the page. And finally, you can use the same approach to position anything anywhere on the screen, just make sure to set the “Position” values in the property tab accordingly (e.g. Z-index to number to control which containers are tappable and what is in the background)

3

Hi! Thanks for the response.

I did what you said and I guess I still need to set the padding right to get the absolute container towards the bottom of the screen. I have attached a screenshot for your reference. >>

Screenshot (296)
Screenshot (296)1920×1080 252 KB

Here, in the above screenshot, the container called “absolute container” needs to be set to the very bottom of the page. How do I set padding to that? Or is there something that I misintepreted.

Please advice me on this. Thanks :)))

4

So would this be overlaying the scroll view, or below it? What is your goal?

If you want it below, then just move it out of the scroll view to the bottom of the “tree” and then reset the “Position” properties to the default.

If you want it to be overlayed then go to the “Position” accordion and you see those 4 values below the “absolute/relative” dropdown. Set your padding in there. That will help.

1 Like
5

Hey there!
I just revisited the question, as I fell into the same probelm again :
:sweat_smile:

image
image1920×1080 193 KB

This is my arragement. I wish to set the navbar,so that, even when the user is scrolling, it is visible and available at the bottom of the screen

Can you please take your time to explain this to me?

6

Page general style tab:
set the

  • stretch to viewport height
  • disable scrolling
    both to true.

Then set the “size” of the scroll view to:
“Grow to height”
“Grow to width”.

That should solve it.

1 Like