HTMLcode - <div> resize

Targets Web
1

Hello, I have javascript component in

in MyHTMLarea class from webSDK. I have a Problem with div height. I have to set the height manually. I can’t set for example
. When I set height in open event that works fine, but when I resized the page and I set the new height that nothing change on the page. Is there something as a refresh or how can I do it?
An Example:
Open event:

...
Then I resized page and I set new HTML code in resized event:
...
- But nothing happend, it's still as after open event with 650px
2

there is an event available to WebSDK controls for when framework properties change. Try using that to trap height changes.

Also, what command are you sending to resize?

3

If you load a full HTML page into the HTMLArea, it is possible vh becomes relative to the HTMLArea itself.

You may want to try setting the div height relative to window.innerHeight instead.

4

The MyHTMLArea subclass in the WebSDK PDF isn’t an iFrame, so I’m thinking that’s not the issue.
I think the OP is not actually telling the browser to resize the div.

As Greg asked, Krystof, what is the code you are using to resize the div in the browser?

5

I called only the same HTML code with new value in div height. It’s more complicated. I have tab panel and inside is container with javascript component. So I can’t use for example div height 100vh(%) or 80vh because I have the Tabs at the top. So I used on HTMLarea.open:

[quote] dim code1 as string
code1 = “<div id=”“ganttChartView”" style="“height: 550px”">…" //or value with container height
me.HTML = code1
[/quote]

And in HTMLarea.resized is:

[quote] dim code1 as string
code1 = “<div id=”“ganttChartView”" style="“height: 750px”">…" //or value with container height
me.HTML = code1
[/quote]
But when I changed webpage sized that nothing happend. Resized event run complete but without changes…

6

I just tried this in the HTMLArea example.

This works perfectly after I disabled the escape in ProcessHTML :

Me.HTML = "<div id='ganttChartView' style='height: 50vh; width: 40vw; background-color: blue;'>...</div>"
7

Something to note… If instead of using your own id, you use the ControlID that’s provided for you, resizing will match the user’s settings in the IDE.

Also, I highly recommend reading the sdk docs cover to cover (14 pages?), as there are numerous hints and requirements that will help you along to success.

8

Michel B: Thanks, but it’s how I said. I couldn’t use “vh” in div - it’s not good choice for me.

Greg O: That’s true. You helped me. Thank you. I deleted all from open and resized event in HTMLarea and I have only in SetupHTML event: Return "<div id=""" + self.ControlID + """>...</div>"

and now I set for javascript component:

jscript = jscript+"var ganttChartView = document.querySelector(""#"+self.ControlID+""");" + EndOfLine jscript = jscript+ "var date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = date.getDay();" + EndOfLine jscript = jscript+ "var items = [" ......... etc
and it works very fine! The component is in full size as HTMLarea and when I changed size of the webrowser so height of the HTMLarea change too with component.
Again Thanks and my Problem is now solved.

9

It is your karma. Each his own belief.

Good luck.