Hello, I am trying to create a blue box, enclosing two text elements. I'd like to grow the width of the blue box so that the text is fully enclosed. The goal is to pass the text elements on a command line, so I'd like the box to automatically resize. Any pointers what I should read to learn how to do this?
if you do not need three hypeelements, the easiest approach may be setting the two textelements as innerHTML of a hypeelement.
If you add a text element and never resize it, then Hype won't actually set a width/height. This means that even if you programmatically change its contents, then any background/border will enclose the contents.
It is only the case in Hype that if you resize the text box that it uses this new size as explicit dimensions.
I guess enclosing two is a bit harder, but perhaps you can just have it be one text box but use a <br> or <p> tags for newlines?
1 Like
Hello. Thank you for your suggestion. This is what I tried:
But the box seems to inherit the original size from Hype (100 x 100).
If I debug in Chrome, and uncheck the width attribute, the box sizes correctly.
Here is ultimately what I'm trying to produce (it doesn't start right away). I don't know if Hype can do this, but I figured I'd start with something I have (it is created by a script in OBS) and see if I can figure out how to replicate it.
I'm guessing from the 100x100 dimensions that you're making a Rectangle.
If you instead start with a text element and never resize it, then this will do what you want.
It is a little bit of an implementation detail, but text elements act this way because browsers can render text slightly differently, so if we always had the explicit width/height on the element then they might wrap in browsers where this isn't intended. Of course if you do resize the text element then we kind of have to set the width/height explicitly.
Please see this example document that runs some javascript on scene load to change the text contents, and note that it will resize the surrounding box:
resizable-text.hype.zip (16.7 KB)
(alternatively I guess you could also just remove the width via code, as that seems to work for you!)
The text box thing worked. Thank you.
1 Like
the styleproperties in my sample were meant to style the hypeelement itsself
xyz.hype.zip (16,9 KB)
1 Like
Ahh! Thank you.
Overall this seems like quite a versatile tool.
1 Like