I’m working on a chat structure. It has a ScrollBox as the base, and inside it I have a VerticalBox (has fill horizontally and vertically). Each line is made of a HorizontalBox and inside that I have a Spacer set to fill size of 1 and a Overlay set to fill size of 2 (if it is the sender then first is the Spacer and then the Overlay, if not, the other way). Inside the overlay I have a TextBox Multi-Line set to fill vertically and horizontal alignment depends if it is the sender then the it is set to right, or else to left. Beside the TextBox I have a Text (which has the time) inside the Overlay which is set to horizontal alignment right and vertical alignment bottom to be in the corner all the time.
The problem that I have is that even tho the TextBox Multi-Line has enough space to show the text on a single line, it wraps the text sometimes random.
Here are some images with basic form, everything added manually:
*Red is an Image that I replaced the spacer with in the example to be better visually for spacing
Here are some Images with the dynamically created structure:
*The text doesn’t contain any /n, that is just how it is wrapped on a different line when it has space to be placed on a single line
**Same as above I replaced the spacer with image, and with white is the space that the
TextBox Multi-Line can take
If I set the TextBox Multi-Line to fill horizontally and not to left/right, then it is using only one line as it should, or multiple lines when the text is too big, but then it looks weird when the text is smaller then an entire line.
So, is there a way to stop it from wrapping the text when the size is big enough to show the text on a single line when using horizontal alignment left/right?
if you set all widgets inside a line to fill, they will split the available space through each other.
if you want the text to take its own space, set the text wifget to auto. the fill-widgets will shrink if the text gets wider.
the rule is:
auto size is > fill size in the space calculation. The fill-widgets only take the space, zhe auto-widgets left.
I know, that is why I set the Spacer/Image to 1, and the TextBox to 2. That way the TextBox can’t take more then 66% of the line, so it won’t shrink the Spacer/Image, as when it is set to Auto. (I like to work with >1 numbers and not .33/.66, which would be the equivalent in this case for 1,2)
That is exactly what I don’t want to happen, to take at most 66% of the line and not more. And by setting it to Fill 2, it will take 66% of the line in this case, as the Spacer has 33%, BUT also by setting Fill Horizontally to right/left, it won’t show on that full 66% if it is smaller, but to the size it needs, and when it would be bigger then 66% max size, the text will go on another line inside the TextBox Multi-Line.
I changed the structure, and inside the ScrollBox, I’m adding straight the Overlay which contains the message (TextBox Multi-Line) and the time (TextBox Multi-Line) bellow it (maybe I’ll add a check mark as well for message read or not). Also, for the TextBox Multi-Line acting as the messages I added a value to Wrap Text At because now I only have the Overlay on each line and not a Spacer as well, so like this the Overlay won’t take the whole line when the text is big enough, also depending on if the user is the sender or not, I’m using horizontal alignment left/right on the Overlay.
And that behavior with weird text wrapping only seem to occur when launching a simulated version inside the editor and not when launching the game via contextual menu “Launch game”. I think it has to do with the game being in “Windowed” mode when launching from the editor. I’m not adding Windowed support for the game anyway (ony fullscreen, borderless) so it it fine, I want to avoid the weird UI resizing problems when the window gets resized in Windowed mode.
