Please refer to attached image. What's the best way to implement this UI? Using a scrollable panel and dynamically add labels to it?

  • Something pretty close to this can be achieved by doing this:

    You can simply use a Scroll Container to do the scrolling for you very easily, and put labels inside the scroll container

    This is not perfect, and you'd have to code the GUI logic for when the user hovers over a label and clicks it (that should actually be pretty straightforward), but technically this would work. For whatever reason, buttons and list items just don't have any kind of auto wrapping at the moment. Not sure if that's planned to be added in the future or not.

    This is the best solution I could think of at the moment.

DaveTheCoder PopupMenu seems good but I can't find way to specify maximum width and height of the menu so that the long text will wrap to next line instead of expanding the menu width and also if menu items cannot fully display it should show a scrollbar instead of expanding the menu height.

You'll probably have to so something custom based on VBoxContainer and Label for the text.

Something pretty close to this can be achieved by doing this:

You can simply use a Scroll Container to do the scrolling for you very easily, and put labels inside the scroll container

This is not perfect, and you'd have to code the GUI logic for when the user hovers over a label and clicks it (that should actually be pretty straightforward), but technically this would work. For whatever reason, buttons and list items just don't have any kind of auto wrapping at the moment. Not sure if that's planned to be added in the future or not.

This is the best solution I could think of at the moment.

    SirQuartz Thanks. This work well until I set the label to autowrap and then it stretch all the way down
    Before enable label autowrap

    After enable label autowrap

    And btw, is the Panel above ScrollContainer needed? What's it's purpose?

    You can to adjust the layout for the parent containers. Each child Control gets its size from the parent (based on it's size flags). Node2D should be a Control (you can right click and change type) and then set the min size to be the size you want.

      You need to set the vbox container to expand in the size flags, both horizontal and vertical like this:

      Then it should auto wrap correctly.

      The panel above the scroll container is simply to give you a background so the text isn't floating in an empty void. Presumably, you'd want something like that in your project anyway.