Android - Footer Overlaps WebView

[hvaughan3]

On Android, when setting footer to yes, the footer bar overlaps the WebView content, causing it to cover up the bottom slice of the WebView.

I was able to fix the issue by forking the library and using setMargins on the WebView's LinearLayout.LayoutParams equal to the height of the footer, but I only did that because I could not get any other way to work so I am not sure if this is the best way to fix the problem.

My fix is below.

FROM:

inAppWebView = new WebView(cordova.getActivity());
inAppWebView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

TO:

int footerSize = this.dpToPixels(44);

inAppWebView = new WebView(cordova.getActivity());

LinearLayout.LayoutParams webViewLayoutParams = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

if (showFooter) {
    webViewLayoutParams.setMargins(0, 0, 0, footerSize); // Adding margin the same size as the footer
}

inAppWebView.setLayoutParams(webViewLayoutParams);

[hvaughan3]

Looks like setting the margin only works on some devices/simulators. Looking for another solution that works everywhere now...

Edit: My new solution is to size the WebView to the size of the window minus the status bar, the toolbar (if shown), and the footer (if shown). Would still really like to find the correct solution (using some combination or layout param).

[hvaughan3]

@satbirjhuti I do not have time to create one right now but the link below has my commit for this fix in a forked version of this repo. Hope that helps. Also please note that there is most likely a better way to do this, it should only be treated as a workaround.

Original Commit that did not work on all devices Final commit that has worked on all devices thus far

[dpa99c]

When the footer was introduced by PR #258, the overlap was intentional so that you could have a semi-transparent footer overlaying the webview, for example:

Therefore any PR to "fix" the overlap should be optional to allow overlaying of a semi-transparent footer if so desired.

[kayasky]

@dpa99c Thanks. It makes more sense now. But yeah, some pages that have position: fixed bottom navs suffer from the issue at hand where the user can't tap on the nav because of it being hidden behind this footer.

[RoiDayan1]

you can use insert css to modify the website css like this and pad the view:

let options = 'location=no,footer=yes,hideurlbar=yes,toolbarcolor=#000000,footercolor=#000000,closebuttoncolor=#ffffff';
const browser = this.iab.create(url,  '_blank',options);
browser.on('loadstop').subscribe(event => {
  browser.insertCSS({ code: "html{height: 100%;} body{height: calc(100% - 45px);}" });
});

[GitToTheHub]

This should be fixed. The behavior is not the same on iOS, there the bottom bar does not overlap the webview.