How we can set Page Layout?

[A_VA_Help]

We know that we can set the layout of components, but how we can set the page layout? For example, i want to put the button to the end of page. Is it possible, without setting margins to the button, only set page layout?

[Mevi]

Hi!

See the image below. Use these for the button or whatever you want to place to float on top of other things.

[A_VA_Help]

Thank you for your answer!
But i mean, how to put to the bottom side of screen of the phone, because we have different phones with different screens?
In this example, i want to put last two components to the bottom side of the screen. Is it available?

[JOHN_WORSHAM]

I would bind the ‘Position’ Top value of the top component (O cep??ce) to a formula that calculates screen height - # pixels desired. Like set it to (systemVars.dimensions.screen.height - 100, or whatever). Then place the lower component (Hactpo???) right underneath it like you have.

[Mevi]

(Not answering to the last question but this situation in general) If it’s for elements like that, I would do the styling with flex settings. Steps approximately so:

1. Set page layout advanced style to ”stretch to viewport”
2. Group elements you want on the top into one container and elements in the bottom to another.
3. Put the top container and bottom container into one single container you set to flex grow 1 and to space elements out to opposite ends of container

However, there are several ways of doing this, and this is just one.

[Timothy_Njeru]

@Mevi

See the image below. Use these for the button or whatever you want to place to float on top of other things.

Hello @Mevi, you have a better example of how to achieve a floating button like below

[Mevi]

Hmm, I think I will make a video tutorial about this since this seems like a common question

So here you set the button to position absolute and adjust its positioning. You can find more on this topic at least here. If you have further questions, let me know, but I’ll try to make a video soon.

[Timothy_Njeru]

As we wait for the video, here are my settings for the button and the layout

.

[Jerina]

Hi Mevi, I followed these instructions (I think)
And the bottom container did go to the bottom but also suddenly shrunks to a left column design.
In screendumps you see what the settings are.
What did I do wrong?

[Mevi]

Hi! That is because your other position parameter is Left. Change it to Right and it will align like you want it to

[A_VA_Help]

Thank u Mevi) I understood how to put the button to the bottom of the page.

Could you help, how to put to the center of the page?

[Mevi]

The floating button tutorial is now available here!

For centering, tie the Left position to a formula. In the formula, calculate using a system variable (probably screen width, but check viewport width etc. as well) what the center spot is, and adjust based on button size. So something like (screen width / 2) - (button width / 2).

[Tomi_Laakso]

You can also change the Container width to 100% and select to align items horizontally to the middle. (In some cases you might need to add another Container within the Container that has absolute position and use that to align items to the middle.) So basically same layout props work even with absolute position, but it might take some trial and error to make those match your designs perfectly.

[Timothy_Njeru]

@Mevi

The floating button tutorial is now available here !

Thanks I am sorted now. Floating button doesn’t work for web app preview portal.

[Tomi_Laakso]

In web it’s bit trickier at the moment to get the floating buttons stay in correct place, but it can be done.

You need to add the Scroll view into a Container and define the height for that Container through a Formula. This would limit the Scroll view to stay within the Container so getting the Container height to match the browser window is the key. I tested a little and a fitting Formula seems to be:

systemVars.dimensions.window.height - 64

It checks the browser window height and subtracts the height of the default navigation bar.

Note, I tested this only with Chrome on Mac so if you want to use this in production version, I’d test it with couple of different browsers just to make sure it works with them too.

[Jerina]

Yes! Got my button at the bottom (tongtwister ;-p)
with this instruction + stretching to viewport (in page settings) yiha!

Only now have to figure out how to stretch the button back to wide stretched view…

[Mevi]

Hi!

Try setting align self to the fourth option, and if that doesn’t work, just set the width to 95% or similar!

[Jerina]

yup. found it. the allign self button doesn’t do the job. but width to 95% does!
thanks!