I have already sent this to Support; however I was wondering if anyone else has seen this issue, or if I’m just doing something stupid.
Basically; I have a responsive layout. In the layout there are several buttons, made up of a rectangle, icon and text. The first two in a row work absolutely fine; the design changes as per my configuration, on each view.
However when I copy the first two buttons and place them underneath the design breaks in preview.
The pictures below explain it much better.
The first Two buttons working fine in preview; in each view (desktop, tablet, mobile)
I’ve spent hours trying different things. I’ve delete everything several times and started from scratch, slowly checking… but every time I add the next row of buttons it break. Even if I create the buttons from scratch each time, rather than copying.
I feel your frustration, it only takes one setting to ruin it all, and I am not ruling out a bug.
I would try a rectangle container underneath your buttons.
Failing that I would need you to clone a copy to really check further. Just copy the 1 screen to a dummy app if you like.
I don’t think the rectangle will work but will try it. I’ve had (and need) buttons all the way down this page. I did originally have that and had the same issue when previewing; it just ended up a giant mess.
The rectangle at the top of the page, with the user ID and logout button works fine.
I’ll give support a chance to respond. I’ll then come back to you.
@MattTakharRC
Hmmm… one thing you can try… remove the group and set each gray rectangle to have the same layout setting as the group itself.
What could be happening is there is something not correctly adhering to the layout settings because of the group.
Your rectangle will act a parent element (aka a group). Avoid using group unless you absolutely have to.
Let me know if this fixes your issue or causes more. We can troubleshoot together. It took me a while to somewhat master the responsive design and even still I run into issues here and there.
I deleted row 2, removed the group from row one and still get bad alignment issues. I’ve set the placement on desktop, tablet and mobile - same issues.
the strange thing is, sometimes if I flick between desktop, tablet and mobile in the designer the rectangles will change position! only sometimes but it does happen, like this… its very buggy.
Ok I added a new screen next to yours called “Menu 2” where I took a run at what you were trying to do I think. Let me know if that works. Some notes on what I did:
I used the same description on all three screen sizes. I think the design can accommodate it if you collapse to a single column on mobile, which I did. I think swapping out that text inside your rectangle was wreaking a bit of havoc here. We’ll look into this. In the mean time, if you want to change the text like that, you might need to just try having a completely different rectangle on each screen size too so you’re not trying to manage different content in the same container.
When using two column layouts, make sure your outer rectangles are set to Anchor Center, not Anchor Left & Right as it will scale better.
When using the side nav, I find that it’s easier to first create a container with a rectangle set to Anchor L&R, then position that in the empty space next to the nav. Get that looking good on all the screen sizes, then put your content for that row inside that rectangle. It’s a bit hard to explain but this allows you to have content centered inside a scaling container that’s next to the fixed width side nav. See the GIF below:
Wow thank you so much for taking the time to explain how to set this up properly. It does make sense using the container and setting the anchors correctly.
It’s working really well now. I’ll add the rest of the menu items and get it published. I’ll also go through the app and make a few changes based on your advice.
@adalojosh Hi Josh, I’m making a client’s app and I’m having two problems in the responsive one that doesn’t happen in the legacy one.
In the responsive I have a button with a quantity selector in a dropdown and the button has two actions: go to screen A if the selector is 1 or go to screen B if the selector is 2… but it does not execute the action. (in the legacy version without problems), then I made it so that when I clicked it took me to screen A to display the dropwone value to a hidden input but there I ran into another problem, on screen A I have two buttons one below the other. . button A visible if the input = 1 and button B if the input = 2 … the visibility works well but the problem is that if the input is 2 the button 1 disappears but the 2 does not take the place of the one leaving that space empty ( In the legacy that doesn’t happen)
