How to get full-width UI Hboxcontainer to hold left and right aligned label

Question

I have a scene 224 pixels wide and I'm trying to code a simple UI rather than using the visual editor.

I'm trying to get a hboxcontainer to expand to the full width of the screen and hold two labels. I'm trying to get one label left aligned and the other right aligned to the far right of the container. I can get this to work perfectly in the editor but not in code.

extends Node2D

func _ready():
    var hbox = HBoxContainer.new()
    hbox.set_h_size_flags(Control.SIZE_EXPAND_FILL)
    hbox.set_anchors_preset(Control.PRESET_WIDE)

    var label_left = Label.new()
    label_left.set_text('LEFT TEXT')
    hbox.add_child(label_left)

    var label_right = Label.new()
    label_right.set_align(Label.ALIGN_RIGHT)
    label_right.set_text('RIGHT TEXT')
    label_right.set_h_size_flags(Control.SIZE_EXPAND_FILL)
    hbox.add_child(label_right)

    add_child(hbox)

I feel that I'm not managing to get the container to match the layout selection which I can use in the editor which is the either the TOP WIDE or FULL RECT option.

Here's how it looks when I design it in the editor:
https://postimg.cc/Jyvknjq8

Here's how it looks when I attempt the code:
https://postimg.cc/7GzTTbs2

Hoping someone has done this type of thing in code before and can advise me how to do this. Thanks for any help.

Answer 1

This question has been answered in the comments of the main answer, but it wasn't very clear so to make it short :

The node needs to be a Control node, the script won't work if it extends a Node2D.

Comments

That's it!! Thank you so much Edesse. I completely overlooked the fact that I was using Node2D as the base node. I really appreciate you taking the time to look into it, I've been battling this for several days now. Cheers :)

---

I'm sorry, I assumed you knew that you have to put the UI component inside a Control Node. (I forget that many beginners don't know this.)

That is a lot of tutorial on Youtube you can watch, like this tutorial:

https://www.youtube.com/watch?v=y1E_y9AIqow&list=PLhqJJNjsQ7KGXNbfsUHJbb5-s2Tujtjt4&index=1

---

@Mison I'm a beginner as well, you're welcome :)

---

Thank you for your replies Skyfrit, I only really started working with UI containers just recently but I certainly won't forget this in the future!

---

The UI components will be a bit difficult to learn and use at the beginning because sometimes it doesn't work as you think. When I first started using Godot, I didn’t even know how to put a button in the center of the screen.

Answer 2

Here is the code:

func _ready():
    var hbox = HBoxContainer.new()
    hbox.set_anchors_and_margins_preset(Control.PRESET_TOP_WIDE)

    var label_left = Label.new()
    label_left.set_text('LEFT TEXT')
    hbox.add_child(label_left)

    var label_right = Label.new()
    label_right.set_text('RIGHT TEXT')
    label_right.size_flags_horizontal = Control.SIZE_EXPAND + Control.SIZE_SHRINK_END
    hbox.add_child(label_right)

    add_child(hbox)

Comments

Thanks Skyfrit for posting. On my machine your code appears to render the same as before (not expanded). Just curious, did you run this (your code) on your machine?

---

When I run Skyfrit's code I get the same result that when I run your initial code, so I guess it is not an individual machine issue. I double-checked your code and saw nothing wrong, also built a scene based on it and, as you said, runs as we expect. It might be an engine issue, but I'm new to Godot so I don't want to affirm anything.
Good luck Mison !

---

Yes, I tested the code before posting.

---

Well, in my previous post I wanted to insist on the fact that your code didn't seem to change anything. What makes it work, and we couldn't see it before, is that it extends a Control node. Make it a 2DNode and it won't work.

@Mison you now have your answer : it works if it extends a Control node, but not if it is a 2DNode. I don't know what I haven't thought of it before because I had a similar issue a few days ago : it is common that 2DNode doesn't handle UI things as we expect, so make sure to create a Control node.