Dynamic gallery buttons Y position not starting 0

(2) Share

Report

Posted on by Amersfoort

I want to define a gallery of buttons in 4 columns with a dynamic button height. First I defined 4 galleries with flexible height, which is not convenient in maintenance.
Now I'm trying to create a dynamic gallery with one button and a collection, which controls the buttons.
Although the top button of each column has a y value of 0, each first button of a column is lower and lower. The template size of the gallery is 1 and the template fill is 0. Button has padding values 0.

What can I do to put all columns at position 0 in the Gallery?

Collection:

ClearCollect(colButtonsTemp;  
    { button: 1; x: 0; y: 0; h: 50 };
    { button: 2; x: 0; y: 100; h: 60 };
    { button: 3; x: 0; y: 200; h: 70 };
    { button: 4; x: 0; y: 300; h: 80 };
    { button: 5; x: 0; y: 400; h: 90 };
    { button: 6; x: 0; y: 510; h: 100 };
    { button: 11; x: 230; y: 0; h: 50 };
    { button: 12; x: 230; y: 100; h: 60 };
    { button: 13; x: 230; y: 200; h: 70 };
    { button: 14; x: 230; y: 300; h: 80 };
    { button: 15; x: 230; y: 400; h: 90 };
    { button: 16; x: 230; y: 510; h: 100 };
    { button: 21; x: 460; y: 0; h: 50 };
    { button: 22; x: 460; y: 100; h: 60 };
    { button: 23; x: 460; y: 200; h: 70 };
    { button: 24; x: 460; y: 300; h: 80 };
    { button: 25; x: 460; y: 400; h: 90 };
    { button: 26; x: 460; y: 510; h: 100 };
    { button: 31; x: 690; y: 0; h: 50 };
    { button: 32; x: 690; y: 100; h: 60 };
    { button: 33; x: 690; y: 200; h: 70 };
    { button: 34; x: 690; y: 300; h: 80 };
    { button: 35; x: 690; y: 400; h: 90 };
    { button: 36; x: 690; y: 510; h: 100 }
);;

Result of this collection in the Gallery:

Screen definition:

Categories:

Building Power Apps

I have the same question (0)

All responses (7)

Answers (0)

Suggested answer

AmínAA 1,228 Super User 2025 Season 2 on at

Like (1)

Report

Greetings Amersfoort!

I'm quite intrigued to understand what would drive you to create such a gallery with this many buttons, but setting my curiosity aside. I am pretty sure this is some misconfiguration of the gallery in some part . . .

In those images you can see that I have recreated what you have without any problems in the spacings . . . I'll show you the properties of my buttons and galleries so you can try and fix it!

Hopefully this helped you out enough to solve your problem . . . If that's the case feel free to mark this reply as an answer, otherwise feel free to reply as well for further help!

Was this reply helpful? Yes No
Amersfoort 20 on at

Like (1)

Report

Thanks for your reply.

I'm making an app for home automation. Some devices require more information and therefore more space than other devices.

You can see the headers of each column seem not to have the same Y value, but they have the same 0 value.

My example was perhaps a bit oversimplified, because it shows an equally high button per line, but as the example shows, the buttons must have a dynamic height in 4 columns without the use of 4 galleries with dynamic height, and yet fit well together.

Here is the gallery setting I use:

I have tried your setting for the gallery, but than all buttons take the same space in one row, not fitting well with upper and lower buttons (because of my oversimplified example).

Any other ideas/suggestions?

EDIT: each extra button in a column causes an extra Y pixel in the column to the right of the previous column. So 6 buttons in the first column cases that the top button in the second column should have a Y value -6.
EDIT 2: It seems to be related to the gallery template size, but I don't understand why...

Was this reply helpful? Yes No
Suggested answer

AmínAA 1,228 Super User 2025 Season 2 on at

Like (1)

Report

Hi there Amersfoort!

Alright, let me be the first one to say. Nice screen, looks awesome!

Now, setting that aside, that is a little bit more complex than I actually expected . . . You would have to build a somewhat complex gallery to make that work if I'm not mistaken . . . First thing, you would have to set a wrap, in order to set either the columns or the rows of the gallery, and then go on from there . . . The thing with the setup you have, is that it's really not as simple as just buttons ordered like that . . . And the template size is the size of each "row" of the gallery, which is why having it set to 1 is somewhat wrong, altough it can work to your advantage . . . The fact that you have it at 1, is what causes that pixel deviation, since for each "row" on the gallery it is being displaced 1 pixel . . . Setting it to 0 might or might not solve your pobelm there, but I'm not sure . . .

One thing you can try, which you might've already did, is just set the x and y to -1 pixel for earch of the items that are displaced . . . That might help but once again, I'm not sure . . .

The correct way to make this, in my opinion, would be using nested galleries, in which you have a parent gallery, that holds the menus, and within that gallery, a child gallery that would hold all items within each specific menu, if that makes sense . . . That is how I would do it, and I've done it a few times, altough it's not something simple to make work properly, but if you have the experiencie, I'm sure you'll figure it out . . .

Hopefully any of what I stated can help you out with this, if that's the case, feel free to mark this reply as an answer, otherwise feel free as well to reply for further help on this!

Was this reply helpful? Yes No
AmínAA 1,228 Super User 2025 Season 2 on at

Like (1)

Report

Hi there Amersfoort!

Just checking in to see if you need any further assistance with this!

Was this reply helpful? Yes No
Amersfoort 20 on at

Like (1)

Report
Thanks for asking and all your suggestions AminAA.

The only "solution" I can find is substracting values from Y parameter, depending on the number of buttons. This makes my already complex app even more complex, so I think it's not a solution for me. It's a weird powerapps behavior I can't explain, maybe it's a bug. For now case closed without a real solution.

ClearCollect(colKnoppenTemp; { knop: 1; x: 0; y: 0; h: 50 }; { knop: 2; x: 0; y: 100; h: 60 }; { knop: 3; x: 0; y: 200; h: 70 }; { knop: 4; x: 0; y: 300; h: 80 }; { knop: 5; x: 0; y: 400; h: 90 }; { knop: 6; x: 0; y: 510; h: 100 }; { knop: 11; x: 230; y: -6; h: 50 }; { knop: 12; x: 230; y: 100-6; h: 60 }; { knop: 13; x: 230; y: 200-6; h: 70 }; { knop: 14; x: 230; y: 300-6; h: 80 }; { knop: 15; x: 230; y: 400-6; h: 90 }; { knop: 16; x: 230; y: 510-6; h: 100 }; { knop: 21; x: 460; y: -12; h: 50 }; { knop: 22; x: 460; y: 100-12; h: 60 }; { knop: 23; x: 460; y: 200-12; h: 70 }; { knop: 24; x: 460; y: 300-12; h: 80 }; { knop: 25; x: 460; y: 400-12; h: 90 }; { knop: 26; x: 460; y: 510-12; h: 100 }; { knop: 31; x: 690; y: -18; h: 50 }; { knop: 32; x: 690; y: 100-18; h: 60 }; { knop: 33; x: 690; y: 200-18; h: 70 }; { knop: 34; x: 690; y: 300-18; h: 80 }; { knop: 35; x: 690; y: 400-18; h: 90 }; { knop: 36; x: 690; y: 510-18; h: 100 } );;

Result:

Was this reply helpful? Yes No
Suggested answer

AmínAA 1,228 Super User 2025 Season 2 on at

Like (0)

Report

Hi there @Amersfoort!

I have a few ways you could solve your problem... For starters, I believe your problem may be caused by some properties within either the containers or the gallery itself... If you check one of my previous replies, I managed to do what you wanted, without any special properties or functions, and I could probably post the YAML code for you to paste in your app... Besides that, you could very well use different galleries for each section, which, while not a perfect solution, should also solve the problem regarding your misplacements.

Should you feel like none of what I replied is a real solution, I would be down to get into a call, and try to see if we can solve it live, after which I can just create a reply explaining what your problem was, so you may mark it, and other replies that you thought helpful as answers.

Edit: Also, you shouldn't need to set up coordinates, as you can create a gallery with cards, that will automatically stack in the order you want or expect.

If you like my response, please give it a Thumbs Up. Should this reply solve your question, please mark your post as Solved. Otherwise, feel free to reply to my answer for further help.
Connect with me if you feel like it!

Was this reply helpful? Yes No
ronaldwalcott 3,847 Super User 2025 Season 2 on at

Like (0)

Report

Is the screen shown here a Power apps screen?

Would be interested in knowing how it was created.

Was this reply helpful? Yes No