Android Code Snippet [B4X] Auto Height Webview

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:
Click to expand...
JohnC

JohnC

Expert
Licensed User
Longtime User
I don't exactly understand what this code does?
 
Biswajit

Biswajit

Active Member
Licensed User
Longtime User
JohnC said:
I don't exactly understand what this code does?
Click to expand...
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

JohnC

Expert
Licensed User
Longtime User
So this code is to allow a webview to change it's height depending on the inner content of the page?
 
Biswajit

Biswajit

Active Member
Licensed User
Longtime User
luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
Biswajit said:
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.
Click to expand...

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

fredo

Well-Known Member
Licensed User
Longtime User
luke2012 said:
Where I can find WebViewExtras2 ?
Click to expand...

Normally the lib was available here: http://b4a.martinpearman.co.uk/webviewextras/
But the link is not available right now.

I'm leaning far out of the window and attach @warwound 's lib here.
2020-08-27_09-43-30.png

@warwound, please let me know if this is not okay...
 

Attachments

  • wwx2.zip
    41.4 KB · Views: 526
Last edited:
luke2012

luke2012

Well-Known Member
Licensed User
Longtime User
Biswajit said:
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
Click to expand...

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

Biswajit

Active Member
Licensed User
Longtime 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

luke2012

Well-Known Member
Licensed User
Longtime User
Biswajit said:
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))
Click to expand...

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

Biswajit

Active Member
Licensed User
Longtime User
luke2012 said:
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 ?
Click to expand...
If its inside a CLV then you have to call ResizeItem to resize the panel containing the Webview

luke2012 said:
As alternative way, is it possibile to set the webview as fixed height and let the user to scroll the text inside ?
Click to expand...
That is what this code does
Biswajit said:
Change this following code
B4X: 
Dim maxheight = 100%y - (topbar.height + bottombar.height)
lblCardDesc.Height =  Min(maxheight, DipToCurrent(height))
Click to expand...
 
You must log in or register to reply here.
Top