Row cells, horizontal / vertical alignment depending on viewport width (formula)

Hi everyone, as im working on a webapp project, i came across this idea, i think it will help a lot.
You can vote for it here

1 Like

Now this why I use container with horozintal layout and sub-containers as “cells”.

If we could do that in a row component that indeed may speed up the design process.

Wait, but how can you make the layout from horizontal to vertical dynamically?
because you cant set that with formula

In fact you cannot change the layout, but You can set the sub-container width to a formula like

IF(systemVars.dimensions.viewport.width<256, "100%", yourdefaultsize)

I am not sure what the syntax is, so please correct that.

This formula changes the sub-containers size to 100% of parent container, this way forcing each next “cell” to a new row.

oh ok, yeah that’s possible, but what i was aiming, is something like WordPress does automatically, where in a smaller screen size, the containers from horizontal, they become vertically aligned,
In appgyver the same can be achieved by using visibility, but i thing is something so basic, that there is no reason to overcomplicate things

Well, I understand this. Well in case of Wordpress it is most probably simple @media queries.

And this:

is basically the same thing just in Appgyver.

There are of course “table” views in Wordpress as well, but I don’t think they shrink to vertical automatically.

In Appgyver I consider “row” as a “table” layout component. Read more here:

But even this article states that:
" Note: For better performance and tooling support, you should instead build your layout with ConstraintLayout. "

One final note, CSS as a styling language is also evolving towards a more grid and container - subcontainer like approach. See more here:

So these are all the reasons why I try to avoid the row component as much as possible. :laughing:

Maybe, i didnt understood exactly, how

this example performs, do you have an more specified example, because thats maybe what im looking for,
for example, what i need, is to have this configuration when the screen is big

and this one when the screen gets smaller over a threshold

Is that what you achieve with that function?
And if yes, can you explain a bit more in which container you should put which function
Sorry for taking your time, im just trying to understand it

Yes, so we can achieve exactly this with the above formula. It of course takes some time to master it. I still struggle sometimes. But here is what you should do:

Layout tree:

Képernyőfotó 2022-05-14 - 16.39.56

Main container settings:

Subcontainer settings:

I put the formula in the min-size part, because of the IF() formula needs both the true and false value to be set. So it is easier to arrange it this way. Formula is this:

IF(systemVars.dimensions.viewport.width<320, "100%", "30%")

Do pay attention to subcontainer > layout > Space between components properties. There you should remove all that you can to have a good result.

This is the final result:
1024px (- the navbar on the left)

320px (- the navbar on the left)

No worries, I am always happy to help. If I have time. :angel:

WOOOW, im so impressed, would never thought that was possible!
Thanks

1 Like

Oh and as a further improvement, you can of course add nested IF() to create several different breakpoints.

And also there was a thread here about masonry grid layout. Check that out for some further fancy layout ideas.

How useful all this information, I found it very useful for my… excellent.