Help needed for desktop app

Get Help
1

Hello!
is there a method to make a desktop app responsive. I know that the feature is not in place yet, but I noticed by using card list instead of a custom list it works better for example. Are there other kinds of stuff to know? I noticed that the text and buttons are moving around when using them is a custom list…

thanks for your help.

2

Hi @Nocodep — For me, starting with a screen (page) size of 1600 alleviates how the components behave/move within the page. Since it is responsive to some extend, components or groups tend to display centered on larger screens and okay on normal screens around 1280px. I also place rectangle components beneath elements I want to contain or group together and set no background color. The responsive engine requires a lot of work but for now I am getting by this way.

2 Likes
3

thanks @hobokencloud I will try that !

4

HI @hobokencloud @Nocodep

I’m trying to understand how it works for webapps as well. Do you have any other hints?

Bringing another part of the puzzle - here are the results of my experiments. For webapps I did it with rectangles:

  • responsiveness is related if components “lean” to the edges of the screen. If they “float freely”, then it seems they scale proportionally;
  • if the rectangles are “locked” between the screen edges, then component width starts to play an important role: the components with width below 220-230(?) become fixed-width, and others start to scale.
    NB: it doesn’t work like that in every case, though…

I’ve made a short video displaying this: Adalo experiments: rectangle responsiveness - YouTube

2 Likes
5

Interesting, honestly I switch to another solution for the small project I had to dev it was time consuming just to align stuff. Otherwise I am a big fan of adalo.

6

For the record, posting to keep it here.\

Investigating further the case with rectangles, I’ve discovered that there are 2 different CSS styles used: “flex-basis” and “flex-grow”.
The ones with “flex-basis” keep their dimensions, and if there is not enough space, scale down.
The ones with “flex-grow” tend to scale up (take the empty space), but if there is not enough space, they scale down before the flex-basis ones.

The logic of setting these classes is unclear though; seems that “flex-grow” is assigned to wider boxes, and “flex-basis” - to thinner ones. And it does not only depend on absolute box width in pixels, but also on size relation (thinnest to widest), number of components, empty space between them and if one of the components “touches” the screen border.

It would be great if someone could shed a light how it works. @anon78309838 may be you could advise?

1 Like
7

I’m afraid this stuff goes way beyond my understanding :slight_smile:

8

@anon78309838 ok, I understand :slight_smile:

There were several requests about some video/tutorial explaining the layout principles - how this works in Adalo. I remember that community members were asking someone from core dev team to explain that.
Could you please advice, if it is planned or not? Such explanation could potentially save A LOT of time for every community member, as I think all of us are spending hours and hours with pixel-perfect adjustments :slight_smile:

Thank you!

2 Likes
9

Yep if someone from Adalo Can help :+1:

10

I will put the request in with the team.

3 Likes
11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.