flexible size of contrainer control

Targets Web
1

Hi Guys,

I am trying to create a web container which hold one weblabel. I wanted to resize both control according to the content of the label.

Example: When the label contains 100 characters, the weblabel and webcontainer will adjust based on the size of the content. Just like in CHAT messaging.

Anybody had already accomplished this?

2

The big problem here is to get the size of the text. In Desktop, one would use the Graphics StringHeight and StringWidth but since most hosts don’t have fonts, results are unreliable.

It should be possible to get the size of the text inside the label with a method such as getRange described here.
https://stackoverflow.com/questions/58005936/how-to-get-the-rectangle-of-the-text-in-an-element-of-the-web-page-not-the-rect

You can then adjust the size of your label and WebContainer.

3

Thanks Michel.

Looks like I need to immerse into HTML before getting the solution. I hope there is some other way, I mean, xojo way.

4

If I knew a Xojo way, I would have posted it.

But maybe you can do with a much larger label and WebContainer, to allow a much larger quantity of text.

5

I add a named div tag at the end of the label control I need height calculated with:

ContainerControl11.label6.text = ContainerControl11.label6.text +"<raw><div class='ibb'>&nbsp</div></raw>"

that I search for it in a single time executed timer event (200 ms) with:

me.ExecuteJavaScript("Xojo.triggerServerEvent('"+myhtmlarea1.ControlID+"', 'visina', [document.getElementsByClassName(""ibb"")[0].offsetTop]);")

where myhtmlarea1 is of course MyHTMLArea that returns the value through “visina” event, to avoid using changing hashtags on the fly.

my visina event has

r as integer

parameter, that i get in executeevent part of the myhtml area

dim visinat as integer = Parameters(0).IntegerValue
ContainerControl11.height=visinat

This wont work on resizing windows unless you call search for ibb div in resize event - I didn’t really try it that way - feel free to experiment.

Will have to clean up my code considerably to send example here, but do call if needed.
Control widths I leave on auto (locked right and left). Before thsi I used Michal’s solution with hashtag onchange event that also works but is visible to user.