DISCLAIMER: While this content has been left online for learning purposes, Ops machine specifically recommends NOT using Adalo, ad it's been shown to be frighteningly insecure, incomplete, and generally near impossible to deliver with, in the time that we used it.

Further, the Pragmaflow component library is no longer maintained after having been broken repeatedly by adalo platform updates.

Further, it is the opinion of the author that click and drag layout engines are generally unreliable and don't lead to good production outcomes

‍

Save hours by learning some simple approaches to befriend Adalo's layout engine.

- Prevent items from overlapping
- Creating modern scrolling effects
- Aligning stubborn components
- Get spacing right
- Use fixed top / bottom

The App being shown is: http://depotop.nu/ which helps parents potty train their kids in one 3 days.
It is currently only in dutch but will soon be translated to English, likely using our translation component:  https://youtu.be/T_EikGhUZRg
‍

Transcript
‍

Hey, everyone. I thought today, we would talk a little bit about the Al layout engine. This is something that causes a lot of trouble for people who I guess, especially are newer to Al because it's not inherently obvious how to use, but once you understand it a little bit, then it, it becomes your friend, at least for the most part.

So let's take a look at the app over here. These are two screens the before and after, and I'm gonna show you. How we got from one to the other, and I'm also gonna show you what they actually look like. So this first screen, even though you know, the layout looks kind of straightforward enough and you'd expect it would look a lot like that.

What happens is the button's actually hiding behind this nav bar the space between the list and the button is larger than you would expect. And, and so, yeah, it it's. You know, there's a few things off. And then the other thing is just to me, the way it's scrolling I'm an Android person, so this might be really iOS.

But yeah, I, I found a couple of improvements that could be done as well. So let's take a look at the end result and then we'll see how we got there. So there's a little bit of just a couple of visual fixes. The other thing is that I think someone changed it on me. But the other thing so forget the image, which was formerly fixed and, and you could fix all of these as well, so that the tab is always available.

And, and that is something usually I would do. And then the other thing is that the button over here we've made it floating button, so that it's always on screen. You could, you know, we could still fix that spacing issue and we could still fix the issue where it's going behind the nav. But at the end of the day, just the, when the button's hidden, the user won't know that there's a button there at least until they get to it.

And so it just gives them more of an understanding of what they need to do on the page. And then the last thing you'll notice is that while there's transparency, It's not perfectly transparent behind this box and that's done just cuz otherwise it looks a bit messy and the button doesn't stand out as well.

And at the same time, if this were a solid white block it would still look kind of funny cuz it would just cut off abruptly. So this was the solution I came to. So how do we get from one to the other? All right. So let's take a look at what is causing problems on this page here and you know what, let's just make a fresh copy that we can work.

So for those of you who don't know, you can hold alt and drag. Basically anything, a screen, a component and it, it makes a copy and that's like a standard Adobe kind of shortcut and it's really useful to have. And so, all right. Let's let's go with this guy over here. This is the one that we're gonna fix up.

So I guess the first thing that's kind of obvious that I did here. Visually is that I unrounded the corners I guess probably you're not here for how to unground the corners on an image. And I did stretch it end to end. Let's talk about the snapping here is the way I'll usually do this.

Cause you want things often to snap to the center because otherwise they may appear off center on screen. And the other thing that I usually like to do is snap to the left edge. If you've dragged items,  in a D before, you've probably found a few things. One is that sometimes there's more than one center and I believe that's caused cuz the different objects on the page maybe have slightly offset centers.

And the other thing is that if you just click and drag something, it, it can actually be pretty challenging to get to the center in this case, it's working, but not always. So another trick and I find this works really well is just anchor the left side. And then anchor the center and you'll wanna find an anchor where, you know, you're just going over the edge of your screen.

So that's one and that, that gets us the image. The height is a little different here, but I, I guess I won't play with that for now. Now the way the top is fixed and, and that's already done is just using the fixed to the top property. Okay. So now let's talk about the spacing here. What a lot of people don't realize about lists is that the length of your list, isn't important because it's always going to expand to accommodate the number of records that you have.

So what is really important is the space between wherever you've dragged, the bottom of the list and the button. The, and even this part, overhanging here, isn't important. It really is this line. So you would think at this point, everything would be fine. Although in my experience, it's not you'll also here.

I'll, I'll show you a, a trick that I find kind of useful is Here we are. We're on this page. How do we get to the other? Okay, perfect. So another trick that's pretty useful is just right. Click reload frame. That way you don't reload the whole browser, and you can start on the same page even when you've made an update in the app.

So as we see, even though I got rid of that spacing and often it would work the, the button still hiding behind the, the nav bar at the bottom. So let's see what's happening there. So if we take a look at the buttons properties it's, you know, it's kind of on its own. So that's one nothing's really anchoring it.

I, I don't know if it's snapped to anything. And then what about, oh yeah, it doesn't have the button doesn't have any kind of fixed properties. It's not able to do that. And then this navigation bar it's inherently fixed. It must be fixed bottom. And so what I believe is happening is because this is fixed bottom.

It actually gets taken outta the stack order and it doesn't create spacing. So then some people would say, oh, Hey, what you can do is you can go and use a rectangle and you could. You know, a group with the rectangle and then that would create the spacing around the navigation. And then that would keep the button from going to the bottom.

So here let's do this and I'm gonna use control down to put it to the back, assuming that works which is it sometimes does, but it sometimes doesn't, I guess we're in one of those doesn't. Scenarios. Oh, no, it did. I just wasn't patient enough. Okay. So that's something we can do. And then let's even group these for good measure.

And now let's see what happens. I'm not convinced it'll work still, but let's see.

Nope. So you see again, the rectangle, it, it just didn't behave quite how we expect. And it might just be my fault. Maybe that rectangle was too small. But anyways, let's, let's look at another way to do this. So. Anyways, we wanted that floating button and the button doesn't have that I'm calling it floating, but that fixed property.

So I'm just gonna make sure this, this outer rectangle is larger than the nav and larger than everything else inside of it. And we'll talk really quickly about. I guess the, the layout engine theory is that if you've done any web building, then you know what a diviv is. And if you don't, it's basically a container that you can put things in.

And if you were to use the inspector on your web browser, you'd find that like, basically everything is inside of a diviv. Those are the blocks or the, the, you know, basic units that we're constructing with. And if that's not a great explanation, then I welcome your updates. I am not a web developer.

But knowing that these are the containers we want to use is really all the concept that we need to know. And so what I've noticed is a Dialo works in a really similar way. A Dialo likes dibs. You can create those using rectangles. So, you know, commonly we'll want to turn the background off and then we can make it transparent.

And let's see where we are. I have this group with the yeah, with the rectangle and the nav. And in order to actually do that fixed button thing that I was talking about, what I want to do is cut the button. I'm gonna double click on my. And when you wanna paste into a group, the trick is just double click all the way down to basically the background element or one of the elements inside the group.

And if you paste from there, you see my button is inside the group. So now you see kind of how it was constructed. You know, this final version and I'm going to go to edit styles and I'm going to make it fixed bottom. And that's for the whole. Now, from what I understand, you can get some weirdnesses if you use fixed for some elements of your group and, and not others in this case, I'm only applying it at the group level.

And that usually seems to work. So let's go over here and see how is my progress.

All right. So, so there we have it. And you also see why I put that kind of transparency because this looks a bit funny still, but, but we're getting pretty close. So we will just go and double click our rectangle. And then patiently  wait for, you know, the combination of screen share and, and this is a rather large app.

So the performance isn't perfect. And then here, we can do a little bit of a preview. So my background color white, and I will put the alpha setting here. I think I used something like 70.

So there we are, it doesn't look like my editor updated. I let's, let's see if I managed to do that. Yeah, there we go. So again, there's some tweaking. The box is definitely too high, so I would play with that. But, but here's how you can create a layout that's really consistent and coherent. Now, if I wanted to go a step further and let's say I wanted to fix these items.

And I want to change the way the page is gonna scroll. Well, if I just kind of mouse around, I can see what everything is made of. And there is no kind of main rectangle behind it. I don't think, oh, what is this? Nope, that's just my selection box. Okay. So what we can do is get another rectangle

and we're just gonna kinda. Get it up there. Nice and snapped into the corner at the bottom side, we're going to do the same. So we're just going pretty much perfectly corner to corner for this whole section. You can see there's like a slight edge that I might be missing. So I just wanna make sure I get this properly.

So get that left edge. And then see if I can get the center. That feels a little too far out. I guess I'll grab the right edge and hope for the best. Okay. So control down a whole bunch of times to send this to the background and I'm hoping that's gonna work  we will have to wait a second to find out.

There we go. Yeah, that did work. The, the reliability of that feature has gotten way. So I could leave a background color if I wanted to. Right. This could be really great for styling. On the other hand today, I won't, so we're just gonna put that there now as a best practice, I like to group these things, even if I wasn't going to try to make it fixed.

But I am. And the other thing I realize is that this header is already fixed, right? So it actually just suggests that it would probably be a better idea rather than stacking two fixed items, which really could collapse them altogether. It might not, I'm not sure how it would behave but I might as well just get them all in the same booth.

So if I take a look at this app bar, right, again at bars, I don't have to specify any fixed properties.  because they are built that way. So I'll make all of this a group and then using edit styles, we'll fix it to the top and let's hope for the best. What did we get?

Yeah. Oh,  so then what would be helpful is you see this line over here. I would need to, to fix that with the box and I would want to put. Some type of solid background behind here, just so that you know, we, we fully get the effect that we're looking for. So let's do that. Hey, you know what? I already have something that can act as that white background.

So it turns out we are going to use that. So there it is. I could even add a shadow to this. If I wanted to now the way this was built, I remember now it's a little bit odd. It was an interesting way to do it. Actually, this is like a collapsed rectangle. So I wanna delete that. And then what I want to do is go to this sky and add a shadow.

And I'm at my rectangle level, so I will go to edit styles and we'll just add the basic shadow that looks a little larger by two. Okay. Now let us look at what we've got.

You. Okay. So we're waiting for, did I did I lose something in here? Is that something I did? Or is it just a slow loading? We'll just kind of toggle this page here.

No. Okay. Just slow loading. So there we go. Now we see that we've actually fixed this top part. Now we could argue maybe the shadow up here is kind of funny. So there's, you know, we could go much further but that is how we could do a bunch of cool different things with layouts. Now the last thing that I want to talk about is right now, this is all behaving pretty.

But sometimes you'll get you know, maybe your text is not lining up with, with the items below it, or you'll have several text boxes or several items and they just don't wanna stay in alignment. And then you go, you spend your time aligning these boxes and trying to snap it to whatever you feel you should, as best you can.

And, and it still doesn't work. So once again, what is. The solution, the solution is to use a rectangle remembering that we are basically just making containers for things. And what we can do is just put all these items in their own, essentially a diviv again, it's a square in a dial. So then let me send this to the background.

All right. And again, the important thing with the list is I don't need to get to the bottom of name over here. I need to get to the bottom of wherever I've dragged my list again, the way at DAOs gonna work with spacing is it's more interested in the space between the bottom of. This list and the bottom of this rectangle, and then the space between the bottom of this rectangle and the, I guess the top of my other rectangle over here.

So those are the spacings that it's gonna use to make calculations. I said, I wanted to adjust this a little bit. I. It's probably too much, I think the right effect. And here you can see I'm having trouble getting the accuracy I want. So the, the key is always just to zoom in. So the key spaces that I have is there is no space between the bottom of my list and the bottom of this rectangle.

If there was a D would respect that it's going to respect the space between here and here typically. And what you know, where you see things collapsing often because Adal. Is trying to be responsive and it wants to get rid of white space if it's not needed. So basically if I wanted to create more space, I could do something like this.

Right. And if my list. Grows or shrinks this outer square, this dark gray one is going to grow or shrink as well. And it's always going to keep the space between the bottom of my list, this line here and the bottom of my rectangle. And it's always gonna maintain the space between this rectangle and this button.

So. It, a lot of people like to use external boxes to create padding and space, but I find it's much easier and more reliable to basically rely on the padding that is between the box. And the object that you want to use. Oh, you can see here that I, even, my rectangle went a bit over the edge, but I've gotten away with that.

So you could even say, you know, it's not broken. Don't, don't fix it. We'll see if I caused myself any trouble. And here we are just with the final touchups and final results. Yeah. So you can see this effect of the transparency. It's still a little, it still needs a bit of a tweaking down here, but it's much better.

I adding the square here. I didn't really fix anything cause I didn't have the problem that I was describing, but, but it is a very common problem. And as you can see, the behavior is as expected. The spacing is basically my two spacings that I discussed. And, and yeah, there we are. So this is the Adela layout engine and just some nifty tricks for how to work with it and make it your friend.

And once you nail that, it really. I wanna say half of the early challenging learning curve of using the platform. So I hope that was helpful. And if it was then subscribe, give a, like, it'll encourage us to keep making more of these and reach out if you have any questions.

‍