It’s a simple question.
How can I change the horizontal size of my icons/elements?
It seems to me that I can’t find a way to change it. It’s stuck to a certain size and I can’t seem to find a way to change the size.
I’m using an ImageTexture on a Button inside of an HBoxContainer.
(I just want to change the size of the image)
go to layout > container sizing of the button node, and change the “Horizontal” Expand checkbox to false.
The problem is that it’s already false. It’s false and set on “Fill”, but changing the position doesn’t change anything. I think it has to do with the image, not the actual button. What else can I try? Thanks! 
I know the control nodes seem very weird on first use, but honestly they are so powerful and flexible when you get the gist.
It looks like your settings are a bit weird in either your panel or HBoxContainer. Check the container sizing in both of them.
You can also add a margincontainer as the child of your HBox and make the button a child of the margincontainer. That will give you some more control over the sizing. You can also add a stylebox and add some content margins.
The image you are using looks square, so an expand or fill setting is causing the button to be so elongated IMHO.
Try adding a button to your control node as a direct child and see what it looks like.
Good luck with it.
PS on your button container sizing you should have the vertical to shrink center as well.
I just took out the image, set the Icon Alignment to Center and expanded the icon. It worked.
However, when I put it back inside the HBoxContainer, it disappears, and only appears again when I uncheck the “Expand Icon” option. What do I do?
I already checked the Panel, HBoxContainer and the children of the HBoxContainer to see if anything is off; I even rebuilt the structure from scratch since it’s easy. It’s still an issue.
There are so many settings I will be guessing what it might be.
Panel container may have a minimum height, and your vertical container sizing might be fill for your button. Same for your HBoxContainer.
Did you try a margin container (child of HBox) with the button as a child of that?
I just set up a test scene with
- Control
--- Panel
--- HBoxContainer
---- Button (with small square png as Icon)
The Control I set to FullRect
The Panel I set to BottomWide
The HBox I set to BottomWide
The Button I didn’t touch
It worked as expected 
However I just noticed your control node is a child of a Node2D. Whenever I do that I first use a canvas layer, then the control node. Otherwise you get the “This node doesn’t have a control parent” warning. Also it makes sense to put it on a new canvas layer, as it is not part of the parent node scene at all anyway. This might fix it for you.
So this goes bonkers!
Question: Where can I set “BottomWide”? And what size are those Panels and HBoxContainers? I can’t seem to replicate it, I’m too stupid to do it. I’m really new to Godot, but it’s very good.
Click on a control node and these two drop downs appear.
This is a quick shortcut to items in the inspector but they are very handy.
If you click on the anchor presets you get the full list in the inspector too.
PS The point of the control nodes is you should generally not be setting sizes. The screen should be doing that for you. (Mostly) That is why you can only set a minimum size on control nodes.
Here’s the problem; After I replicated what you did, the icon of the button is still small.
I really don’t mean to annoy you, but I genuinely don’t know what to do. The icon is not setting it’s max size when transformed.
What I want is for the icon to expand as much as possible while not stretching. The size of the image should be set to the biggest size possible before hitting the borders of the button itself.
Oh. It will not because it is an icon texture. You need to make the icon the size you need it.
I think you need a TextureButton.
Then you can set the texture to scale, fit, keep size etc whatever you want. I am so sorry, I think you are just using the wrong node type.
Oh, I see. So now that I have the TextureButton with the texture (I know how to make it stretch or centered, etc.), how can I size the TextureButton correctly? I don’t know if it’s a HBoxContainer property or a property of the button itself.
It will be a property of ALL the control nodes parents! That is the whole point of the control nodes, so when someone resizes their screen, your elements are all shifted about depending on their anchors.
Did you add a canvas layer as the parent of your control node? Have you set your control node to be FullRect?
Add the button to your control node directly. What size is it? You can set the minimum width and minimum heights in the button itself. Make sure it is not set to expand. Make sure the vertical and horizontal are set to shrink center.
Once you have it the right size, add a HBoxContainer. Set it to be BottomWide. Put the Button in it. Is it still as expected?
You can continue to do this with margin containers, panels etc, building up complexity. Just make sure with every element you add, you are anchoring it correctly, setting the expand settings and setting the container sizing (which is wide, collapsed, centered etc). These are not normal nodes like sprites where you just say “I want it this high and this wide”.
Keep practicing with it, when it finally clicks, it is amazing!
I think this finally worked! Thank you so much. If I have anything specific that I need to ask I’ll just send a quick reply again or slide in your DM’s the question.
Other than that, my buttons are finally aligned and properly scaled!
Just a quick question by the way, how can I distance my TextureButtons from one another? I know it’s somewhere, I’m just not aware what it is.
If you are using the HBoxContainer, in theme overrides (in the inspector) you have a constant for separation. You can adjust this.
If you need margins around the buttons, or anywhere, margin containers are used for this as well.
Glad you got it sorted
Just another quick question, I hope it’s not too annoying.
I was working with anchors and such, and here’s what I came up with;
However, when I scale down the frame, the Textures thankfully scale down aswell.
However, the “Gang Wars” image is scaled to the left. How can I turn it to the right?
So that is because your anchor for the transform is on the left. Change that anchor point to be on the right and it will scale to the right.
Or, depending on how you now have this set up, change the container sizing for your right-hand-side element for the horizontal setting to be shrink_end.
Here are two texture buttons in a hbox for an example.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
