Hello there. Before I start, I just want to apologize for the poor title, it is my very first time posting in this category, so if I did something wrong, please point it out. Now that is out of the way, let me explain my problem.
So I am making something along the lines of an application center, and I want to have a multiple choice section. Since this is meant to be modular and scaleable, all GUIs are generated on the server based on certain values and are then sent to the client. Now, there is one problem I am facing. Since I am not a GUI designer, I do not know how to achieve this. I tried approaching this problem multiple ways, but I can’t work out on how to achieve my goal. Without taking much more time, here is a video of my problem and the UI design.
As you saw from the video, my design is basically buttons that are in the same line, they are resized so that all text fits in them (in the video it is just “Sample”, but they would be resized to fit the text in them), and I am trying to fit as many as I can in the first line, and whatever remains goes to the second one (again, in the video, it does not do so, but that is its intended functionality).
As you can see, when resizing, the buttons just stay where they are (that is probably because of the current structure of it), which is not what I want. What I want is that when it is resized, if one or more of the buttons do not fit on the line they are in, it will move them to the row below. The same structure goes for the row below, and so on until all buttons are in the correct places. I have tried many UI elements, but I can’t seem to find the one that will work. Although UIGridLayout does have a good effect, it forces each button to have a certain size, and if the buttons are resized using a UISizeLayout, it will have an odd gap between the two since it count the button as if it had that size. Here is my current project structure:
Basically, the Holder is the box you see highlighted in the video. In the Holder, there are sub-holders called ChoiceHolder. Each one of those has a height offset of 30 (since these buttons all should have a height of 30, I will probably change the height to size later for combability), so the ChoiceHolder's size is (1, 0, 0, 30). Also, parented in the Holder is a UIListLayout which will allows for implementing multiple rows. This has a padding of (0, 20). Inside the ChoiceHolder are the buttons. Each button has a height size of 1, and a width size of 0, since it’s size will be determined based on the amount of space it needs for the text to fit. My idea was that whenever the absolute size of the GUI would change, it would compare each UIListLayout's absolute X size inside the ChoiceHolder with the ChoiceHolder's absolute x size, and if it was bigger, then it would start removing buttons and adding them to the row below until everything fit within the bounds. This would repeat for all rows, and would even add more rows if necessary. You get my structure and how I imagined it.
Refrences
Holder:
ChoiceHolder:(X is (1, 0), Y is (0, 30))
Button:(X Varies per button, Y is always (1, 0))
Thinking back at my structure, I want to ask you, is there a better and/or more efficient way to achieve this? I believe that there is and I have just missed it or not thought of it. If you know a better way, please state it in the replies. If you have any questions, feel free to ask them. I appreciate any help that is given. Thank you for your time and effort.