How to auto adjust height of GUI to the HTML content

metallizer · 30 Aug 2021, 15:56

I'm trying to create a GUI using HTML & ActiveX but unable get the height to auto adjust to the HTML Content. This is a sample code and the content is variable (parsed from the internet) so heights varies every time.

Code: Select all

#a::
words := "Cardano is a public blockchain platform. It is open-source and decentralized, with consensus achieved using proof of stake. It can facilitate peer-to-peer transactions with its internal cryptocurrency, ADA. Cardano was founded in 2015 by Ethereum co-founder Charles Hoskinson. The development of the project is overseen and supervised by the Cardano Foundation based in Zug, Switzerland. It is also the largest cryptocurrency to use a proof-of-stake blockchain, which is seen as a greener alternative to proof-of-work protocols."
f_ref := "Cardano"

Html = 
(
	<html><head><Style>
		body {background-color: #333333; overflow: hidden} 
		p {font-family: 'Raleway'; font-size: 12pt; }
		.words {color: #78ff78;}
		.reference {color: #00ffff;}
	</style></head><body>
<p class="words">%words%</p>
<p class="reference">%f_ref%</p>
</body></html>
)

Gui, +AlwaysOnTop -Caption +ToolWindow Border
gui margin,.5,.5 
gui add, ActiveX, vWB w700 h220, HTMLfile
WB.write(html)
gui Show, AutoSize
Return

Thanks for the help.

teadrinker · 30 Aug 2021, 17:52

metallizer wrote: ↑
Code: Select all
gui margin,.5,.5

What does .5 mean?

metallizer · 30 Aug 2021, 17:59

teadrinker wrote: ↑
30 Aug 2021, 17:52
What does .5 mean?

Gui, Margin affects only the default window, while Gui, Name:Margin affects only the named window. If this command is not used, when the first control is added to a window, the window acquires a default margin on all sides proportional to the size of the currently selected font (0.75 times font-height for top & bottom, and 1.25 times font-height for left & right).

In my case a small white border around the main gui.

metallizer · 30 Aug 2021, 18:18

I hope this makes it clearer

teadrinker · 30 Aug 2021, 19:26

metallizer wrote: ↑In my case a small white border around the main gui.

Margin can't be float, it is in pixels. In this case it is interpreted as 0.
You can calculate an appropriate size like this:

Code: Select all

words := "Cardano is a public blockchain platform. It is open-source and decentralized, with consensus achieved using proof of stake. It can facilitate peer-to-peer transactions with its internal cryptocurrency, ADA. Cardano was founded in 2015 by Ethereum co-founder Charles Hoskinson. The development of the project is overseen and supervised by the Cardano Foundation based in Zug, Switzerland. It is also the largest cryptocurrency to use a proof-of-stake blockchain, which is seen as a greener alternative to proof-of-work protocols."
f_ref := "Cardano"

Html = 
(
   <html><head><Style>
      body {background-color: #333333; overflow: hidden} 
      p {font-family: 'Raleway'; font-size: 12pt; }
      .words {color: #78ff78;}
      .reference {color: #00ffff;}
   </style></head><body>
<p class="words">%words%</p>
<p class="reference">%f_ref%</p>
</body></html>
)

Gui, +AlwaysOnTop -Caption +ToolWindow Border
gui margin, 0, 0
gui add, ActiveX, vWB w700 h220, HTMLfile
WB.write(html)

children := WB.body.children
maxBottom := 0
Loop % children.length {
   rect := children[A_Index - 1].getBoundingClientRect()
   (rect.bottom > maxBottom && maxBottom := rect.bottom)
}
maxBottom *= 96/A_ScreenDPI
maxBottom += 15 ; some value you want for the padding-bottom

GuiControl, Move, WB, h%maxBottom%
gui Show, AutoSize
Return

metallizer · 30 Aug 2021, 19:41

teadrinker wrote: ↑
30 Aug 2021, 19:26
Margin can't be float, it is in pixels. In this case it is interpreted as 0.

Got it, I thought it is calculated based on the font size.

You can calculate an appropriate size like this:

This worked so well, thank you so much. Really appreciate the help.

kczx3 · 01 Sep 2021, 20:41

I’d probably try document.documentElement.scrollHeight before looping over every single child element…
https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript

teadrinker · 02 Sep 2021, 11:09

Good point, this works for me on Windows 10:

Code: Select all

words := "Cardano is a public blockchain platform. It is open-source and decentralized, with consensus achieved using proof of stake. It can facilitate peer-to-peer transactions with its internal cryptocurrency, ADA. Cardano was founded in 2015 by Ethereum co-founder Charles Hoskinson. The development of the project is overseen and supervised by the Cardano Foundation based in Zug, Switzerland. It is also the largest cryptocurrency to use a proof-of-stake blockchain, which is seen as a greener alternative to proof-of-work protocols."
f_ref := "Cardano"

Html = 
(
   <html><head><Style>
      body {background-color: #333333; overflow: hidden} 
      p {font-family: 'Raleway'; font-size: 12pt; }
      .words {color: #78ff78;}
      .reference {color: #00ffff;}
   </style></head><body>
<p class="words">%words%</p>
<p class="reference">%f_ref%</p>
</body></html>
)

Gui, +AlwaysOnTop -Caption +ToolWindow Border
gui margin, 0, 0
gui add, ActiveX, vWB w700 h0, HTMLfile
WB.write(html)

height := WB.documentElement.scrollHeight

GuiControl, Move, WB, h%height%
gui Show, AutoSize
Return

The initial height of the ActiveX control must be less that the bottom boundary of the bottommost child element (I used h0), otherwise this way won't work.
However it doesn't work on Windows 7, height := WB.documentElement.scrollHeight is equal to the control height, whatever it is.
But after changing HTMLFILE to WebBrowser, it starts working again, although the result looks a bit different:

Code: Select all

words := "Cardano is a public blockchain platform. It is open-source and decentralized, with consensus achieved using proof of stake. It can facilitate peer-to-peer transactions with its internal cryptocurrency, ADA. Cardano was founded in 2015 by Ethereum co-founder Charles Hoskinson. The development of the project is overseen and supervised by the Cardano Foundation based in Zug, Switzerland. It is also the largest cryptocurrency to use a proof-of-stake blockchain, which is seen as a greener alternative to proof-of-work protocols."
f_ref := "Cardano"

Html = 
(
   <html><head><Style>
      body {background-color: #333333; overflow: hidden} 
      p {font-family: 'Raleway'; font-size: 12pt; }
      .words {color: #78ff78;}
      .reference {color: #00ffff;}
   </style></head><body>
<p class="words">%words%</p>
<p class="reference">%f_ref%</p>
</body></html>
)

Gui, +AlwaysOnTop -Caption +ToolWindow Border
gui margin, 0, 0
gui add, ActiveX, vWB w700 h0, about:<!DOCTYPE html><meta http-equiv="X-UA-Compatible" content="IE=edge">
WB.document.write(html)

height := WB.document.documentElement.scrollHeight

GuiControl, Move, WB, h%height%
gui Show, AutoSize
Return

How to auto adjust height of GUI to the HTML content Topic is solved

How to auto adjust height of GUI to the HTML content

Re: How to auto adjust height of GUI to the HTML content

Re: How to auto adjust height of GUI to the HTML content

Re: How to auto adjust height of GUI to the HTML content

Re: How to auto adjust height of GUI to the HTML content Topic is solved

Re: How to auto adjust height of GUI to the HTML content

Re: How to auto adjust height of GUI to the HTML content

Re: How to auto adjust height of GUI to the HTML content

Who is online