Android Code Snippet [B4X] Auto Height Webview

Biswajit

Active Member
Licensed User
For B4i:
Run this JavaScript code after the page is loaded:
Sub webview_PageFinished (Success As Boolean, Url As String)
    wait for (webview.EvaluateJavaScript("document.documentElement.scrollHeight")) webview_JSComplete (Success As Boolean, Result As String)
    If Success Then webview.Height = DipToCurrent(Result)
End Sub
If you are using LoadHtml then add this following code before your html text
HTML:
<head><meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/></head>
For B4A:
Dependency:
WebViewExtras2 (v2.20)

Add WebViewExtra and DefaultJavascriptInterface variable in Global Sub:
Sub Globals
    Dim wve As WebViewExtras
    Dim jsi As DefaultJavascriptInterface
End Sub
Initialize WebViewExtra and DefaultJavascriptInterface before loading content in WebView:
wve.Initialize(webview)
jsi.Initialize
wve.AddJavascriptInterface(jsi,"B4A")
Run this JavaScript code after the page is loaded:
Sub webview_PageFinished (Url As String)
    wve.ExecuteJavascript("B4A.CallSub('SetWVHeight',true, document.documentElement.scrollHeight);")
End Sub

Sub SetWVHeight(height As String)
    webview.Height = DipToCurrent(height)
End Sub
 
Last edited:

JohnC

Well-Known Member
Licensed User
I don't exactly understand what this code does?
 

Biswajit

Active Member
Licensed User
I don't exactly understand what this code does?
The javascript code "document.documentElement.scrollHeight" return the actual height of the webview content in DIP unit. Then the B4A sub convert the unit and set the webview height to fit the inner content.

So anyone wants to show a rich text with css style can show in a webview which will not show any scrollbar as the webview height will be changed to fit the inner content.
 
Last edited:

JohnC

Well-Known Member
Licensed User
So this code is to allow a webview to change it's height depending on the inner content of the page?
 

luke2012

Well-Known Member
Licensed User
The javascript code "document.documentElement.scrollHeight" return the actual height of the webview content in DIP unit. Then the B4A sub convert the unit and set the webview height to fit the inner content.

So anyone wants to show a rich text with css style can show in a webview which will not show any scrollbar as the webview height will be changed to fit the inner content.
Great solution :) I'll try it today!
Where I can find WebViewExtras2 ? Searching within B4A Library tab I can't find it.
 
Last edited:

fredo

Well-Known Member
Licensed User

Attachments

Last edited:

luke2012

Well-Known Member
Licensed User
For B4i:
Run this JavaScript code after the page is loaded:
Sub webview_PageFinished (Success As Boolean, Url As String)
    wait for (webview.EvaluateJavaScript("document.documentElement.scrollHeight")) webview_JSComplete (Success As Boolean, Result As String)
    If Success Then webview.Height = DipToCurrent(Result)
End Sub
If you are using LoadHtml then add this following code before your html text
HTML:
<head><meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/></head>
For B4A:
Dependency:
WebViewExtras2 (v2.20)

Add WebViewExtra and DefaultJavascriptInterface variable in Global Sub:
Sub Globals
    Dim wve As WebViewExtras
    Dim jsi As DefaultJavascriptInterface
End Sub
Initialize WebViewExtra and DefaultJavascriptInterface before loading content in WebView:
wve.Initialize(webview)
jsi.Initialize
wve.AddJavascriptInterface(jsi,"B4A")
Run this JavaScript code after the page is loaded:
Sub webview_PageFinished (Url As String)
    wve.ExecuteJavascript("B4A.CallSub('SetWVHeight',true, document.documentElement.scrollHeight);")
End Sub

Sub SetWVHeight(height As String)
    webview.Height = DipToCurrent(height)
End Sub
Hi @Biswajit.
I'm testing the Android version implementation but the webview doesn't resize :-(
I'm trying to understand where is the problem:

I'm implementing this within a B4XPages App:

1) I'm using the wwx2.zip library (attached to this post): WebViewExtras2 (v2.20)
2)I declared within the WebViewExtras and DefaultJavascriptInterface within Class_Globals
B4X:
Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
      
    'WebView autoresize
    Dim wve As WebViewExtras
    Dim jsi As DefaultJavascriptInterface
End Sub
3) I Initialized WebViewExtra and DefaultJavascriptInterface before loading content in WebView
B4X:
    'WebView autoresize
    #if B4A
        wve.Initialize(lblCardDesc)
        jsi.Initialize
        wve.AddJavascriptInterface(jsi,"B4A")
        lblCardDesc.LoadHtml(cfv.Desc)
    #End If
    #if B4i
        private htmlHead as string = $"<head><meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/></head>
        private htmlDesc as string = cfv.Desc
        lblCardDesc.LoadHtml(htmlHead & htmlDesc)
    #End If
3) I runned the JavaScript code after the page is loaded
B4X:
    #if B4A
        Sub lblCardDesc_PageFinished (Url As String)
            wve.ExecuteJavascript("B4A.CallSub('SetWVHeight',true, document.documentElement.scrollHeight);")
        End Sub

        Sub SetWVHeight(height As String)
            lblCardDesc.Height = DipToCurrent(height)
        End Sub
    #End If
    
    #if B4i
        Sub lblCardDesc_PageFinished (Success As Boolean, Url As String)
               wait for (lblCardDesc.EvaluateJavaScript("document.documentElement.scrollHeight")) lblCardDesc_JSComplete (Success As Boolean, Result As String)
            If Success Then lblCardDesc.Height = DipToCurrent(Result)
        End Sub
    #End If
4) Within the B4A Designer (WebView Properties) I have "JavaScriptEnabled" flagged (on) and ZoomEnabled de-flagged (off).

But ... when I run it it doesn't resize (see attached images).
Screen1: There is only 1 line of text
screen1.png


Screen2: Many lines but the last 4 lines isn't displayedWhere I'm wrong ?
screen2.png
Thanks in advance for your preciuos help :)
Luca.
 

Biswajit

Active Member
Licensed User
Do not attach image in full size it makes the post unreadable.

It seems like your text content height is more than the free space available in your app. so you have to add the webview inside a scrollview.
Or
Change this following code
B4X:
Dim maxheight = 100%y - (topbar.height + bottombar.height)
lblCardDesc.Height =  Min(maxheight, DipToCurrent(height))
 

luke2012

Well-Known Member
Licensed User
Do not attach image in full size it makes the post unreadable.

It seems like your text content height is more than the free space available in your app. so you have to add the webview inside a scrollview.
Or
Change this following code
B4X:
Dim maxheight = 100%y - (topbar.height + bottombar.height)
lblCardDesc.Height =  Min(maxheight, DipToCurrent(height))
Thanks for your quick reply!
1) "so you have to add the webview inside a scrollview" ---> The webview is inside a CustomListView (within the ListView inner panel).
B4X:
    Private clvCardFull As CustomListView
    Private pnl As B4XView = CreateItem (ItemVal)
    clvCardFull.Add(pnl, ItemVal)
2) I'll try the code.

As alternative way, is it possibile to set the webview as fixed height and let the user to scroll the text inside ?
 
Last edited:

Biswajit

Active Member
Licensed User
Thanks for your quick reply!
1) "so you have to add the webview inside a scrollview" ---> The webview is inside a CustomListView (within the ListView inner panel).
B4X:
    Private clvCardFull As CustomListView
    Private pnl As B4XView = CreateItem (ItemVal)
    clvCardFull.Add(pnl, ItemVal)
2) I'll try the code.

As alternative way, is it possibile to set the webview as fixed height and let the user to scroll the text inside ?
If its inside a CLV then you have to call ResizeItem to resize the panel containing the Webview

As alternative way, is it possibile to set the webview as fixed height and let the user to scroll the text inside ?
That is what this code does
Change this following code
B4X:
Dim maxheight = 100%y - (topbar.height + bottombar.height)
lblCardDesc.Height =  Min(maxheight, DipToCurrent(height))
 
Top