Widget anchors

Please dear god somebody save me from myself

Okay so I am trying to create a widget for a keypad i am working on and i have everything done but the buttons keep either offsetting themselves or resizing themselves depending on the window size.

Yes i understand that the buttons location is relative to the location of the Anchor and maybe i am misunderstanding something here but no matter what location i have set the anchors to they always end up changing when i resize the window.

About to quit my entire project just because of this LMAO (joking not joking)

Can you show us a screenshot of your setup?

Most important is the hierarchy inside the widget and the details of the parent of the buttons and the buttons themselves.

dont mind some buttons having size boxes and some not, i was experimenting and trying to trouble shoot myself

you dont want a canvas panel, maybe a border for the background with an overlay for placement and a gridbox for the numbers etc

Hello @TTV_KingImpurity ,
You could also use a Uniform Grid Panel, which is a UMG container that organizes its children in a perfectly uniform grid, where each cell has the same size.
This makes it very useful because you can choose in which row and column each widget goes, and the panel will automatically distribute them evenly without deforming when the resolution changes.

Here’s a quick step-by-step guide on how to create it and set it up correctly:

  1. First, set the anchor to the center.

  2. Then set Position X and Y to 0, and set the Size to whatever you want the panel’s dimensions to be. In this case, I used 300 X and 400 Y.

  3. Alignment defines from which point the panel aligns itself within the space it occupies. If you want it centered, I recommend setting it to 0.5 on both values.

  4. In Slot Padding, configure the spacing between the buttons. I used 2.0.

  5. After that, add your buttons with their respective texts. Select all of them and set both Horizontal and Vertical to Fill.

  6. Now place each button in its correct row and column:

Number Row Column
1 0 0
2 0 1
3 0 2
4 1 0
5 1 1
6 1 2
7 2 0
8 2 1
9 2 2
Del 3 0
0 3 1
Arrow 3 2
  1. You can also use the arrow keys to move them between cells.

With this setup, your keypad should work perfectly, without any buttons shifting out of place or resizing unexpectedly.

I’m also leaving you the documentation about anchors, which might be useful for you

And about what you said

don’t worry, it’s completely normal when you’re making a game. We all go through moments where a small detail ends up being way more frustrating than it should be.

The important thing is to keep going and not give up so easily. If you need to ask something or need help with the keypad logic or any other part of the project, feel free to post in the forum. There’s always someone willing to give you a hand or guide you toward a solution.

Don’t give up, it’s all part of the process.

Hope it helps and Happy developing!

1 Like

Please use some of the panels to arrange your widgets instead of the Canvas Panel.

Vertical Box, Horizontal Box, Wrap Box, Grid, Uniform Grid, Stack Box etc.. it’s much easier, I promise

thank you so much for your kindness and time put in for the solution to my problem! I appreciate you loads

1 Like