Hi all,
Is it possible to have a multiline label? I’ve tried the following:
- Setting the width of the outer div enclosing the label
- Inserting a text with newlines using
labelComponent.setText(text) - Inserting
<br>tags inside the text
But none of those options above worked. The text is always displayed in a single line, and the part that falls off the boundaries of the div is just hidden. I’d need to wrap the text so that it continues in different lines.
Is there a way to do that without creating a label for each line?
Thanks!
Add <html> at the beginning of your text.
Example: labelComponent.setText("<html>Line 1<br>Line 2")
Awesome, works like a charm! Thank you very much!
Hey,
How do you set the width of a div? When I tried <div style="display:inline-block; width:100px;"> it had zero effect…
@szabi.fekete if the div is empty you won’t see anything, you will need to fill it with something.
If you just want a space to place another object according to your needs, try wrapping your object inside a div and add padding to that outer div.
Sorry for the chinese text… So as you can see the 3 labels are very close to each other and if the width styling worked they would be much further apart.
On another node however I tried this
And it worked! So I have no idea why it works in one place and not in the other. What do you think?
I’m not 100% sure, but maybe it’s because in the first case you are filling the text from the backend code.
Using width to space components never worked for me; the only thing it does is cutting whatever is inserted inside the component (are you sure the spacing is correct? I see the “force/torque” text is cut at the end).
To space elements, I always try wrapping elements in an outer div and setting padding in that outer element.
@jubeira
Backend loading makes no difference in this case.
See the issue I’m having is I’m trying to internationalize our app and I need to make sure the labels are of fixed with so the elements don’t move around based on the length of the loaded text.
Setting the width of the label should work fine, however that blocks backend loading the text for some reason.
So now my solution is to wrap labels in an outer div and put a zero height hr tag under it, which I can use to set the minimum width of the div. But this is an ugly workaround.
Do you have any suggestions or ideas?
Thanks for the help!