Unwanted Top and Bottom White Space in Android Webview after keyboard disappears
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
References SO Questions: remove-unwanted-white-space-in-webview-android
and android-webview-has-extra-white-space-at-the-bottom
I am using NativeScript for angular mobile app development. I have a login page that renders in webview and once app has the token, app then redirects to other native components.
My problem is: Screen renders fine for the first time and when user clicks on any of the text field, key board appears but when user presses Android Back button to hide the keyboard it shows the whitespace in top and bottom of the page.
Based on suggestions available on above threads, I have tried setting the padding and marging to 0.
and
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1">
webview nativescript nativescript-angular
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
add a comment |
References SO Questions: remove-unwanted-white-space-in-webview-android
and android-webview-has-extra-white-space-at-the-bottom
I am using NativeScript for angular mobile app development. I have a login page that renders in webview and once app has the token, app then redirects to other native components.
My problem is: Screen renders fine for the first time and when user clicks on any of the text field, key board appears but when user presses Android Back button to hide the keyboard it shows the whitespace in top and bottom of the page.
Based on suggestions available on above threads, I have tried setting the padding and marging to 0.
and
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1">
webview nativescript nativescript-angular
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
Is it when you focus on a textfield inside webview? I'm unable to reproduce the issue, can you update the Playground example so we can see the issue.
– Manoj
Nov 23 '18 at 6:36
It is when we press the back button to dismiss the keyboard, try to have some background color for body in html. will update the playground soon
– Narendra
Nov 23 '18 at 6:38
That's exactly what I tried and I was using Android 8.
– Manoj
Nov 23 '18 at 6:39
Thanks Manoj, that playground actually helped me. Looks Like my webview was inside a GridLayout and setting the height of that layout to 100% fixed the issue.
– Narendra
Nov 26 '18 at 0:10
add a comment |
References SO Questions: remove-unwanted-white-space-in-webview-android
and android-webview-has-extra-white-space-at-the-bottom
I am using NativeScript for angular mobile app development. I have a login page that renders in webview and once app has the token, app then redirects to other native components.
My problem is: Screen renders fine for the first time and when user clicks on any of the text field, key board appears but when user presses Android Back button to hide the keyboard it shows the whitespace in top and bottom of the page.
Based on suggestions available on above threads, I have tried setting the padding and marging to 0.
and
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1">
webview nativescript nativescript-angular
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
References SO Questions: remove-unwanted-white-space-in-webview-android
and android-webview-has-extra-white-space-at-the-bottom
I am using NativeScript for angular mobile app development. I have a login page that renders in webview and once app has the token, app then redirects to other native components.
My problem is: Screen renders fine for the first time and when user clicks on any of the text field, key board appears but when user presses Android Back button to hide the keyboard it shows the whitespace in top and bottom of the page.
Based on suggestions available on above threads, I have tried setting the padding and marging to 0.
and
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1">
webview nativescript nativescript-angular
webview nativescript nativescript-angular
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
asked Nov 23 '18 at 4:06
NarendraNarendra
2,0511823
2,0511823
Is it when you focus on a textfield inside webview? I'm unable to reproduce the issue, can you update the Playground example so we can see the issue.
– Manoj
Nov 23 '18 at 6:36
It is when we press the back button to dismiss the keyboard, try to have some background color for body in html. will update the playground soon
– Narendra
Nov 23 '18 at 6:38
That's exactly what I tried and I was using Android 8.
– Manoj
Nov 23 '18 at 6:39
Thanks Manoj, that playground actually helped me. Looks Like my webview was inside a GridLayout and setting the height of that layout to 100% fixed the issue.
– Narendra
Nov 26 '18 at 0:10
add a comment |
Is it when you focus on a textfield inside webview? I'm unable to reproduce the issue, can you update the Playground example so we can see the issue.
– Manoj
Nov 23 '18 at 6:36
It is when we press the back button to dismiss the keyboard, try to have some background color for body in html. will update the playground soon
– Narendra
Nov 23 '18 at 6:38
That's exactly what I tried and I was using Android 8.
– Manoj
Nov 23 '18 at 6:39
Thanks Manoj, that playground actually helped me. Looks Like my webview was inside a GridLayout and setting the height of that layout to 100% fixed the issue.
– Narendra
Nov 26 '18 at 0:10
Is it when you focus on a textfield inside webview? I'm unable to reproduce the issue, can you update the Playground example so we can see the issue.
– Manoj
Nov 23 '18 at 6:36
Is it when you focus on a textfield inside webview? I'm unable to reproduce the issue, can you update the Playground example so we can see the issue.
– Manoj
Nov 23 '18 at 6:36
It is when we press the back button to dismiss the keyboard, try to have some background color for body in html. will update the playground soon
– Narendra
Nov 23 '18 at 6:38
It is when we press the back button to dismiss the keyboard, try to have some background color for body in html. will update the playground soon
– Narendra
Nov 23 '18 at 6:38
That's exactly what I tried and I was using Android 8.
– Manoj
Nov 23 '18 at 6:39
That's exactly what I tried and I was using Android 8.
– Manoj
Nov 23 '18 at 6:39
Thanks Manoj, that playground actually helped me. Looks Like my webview was inside a GridLayout and setting the height of that layout to 100% fixed the issue.
– Narendra
Nov 26 '18 at 0:10
Thanks Manoj, that playground actually helped me. Looks Like my webview was inside a GridLayout and setting the height of that layout to 100% fixed the issue.
– Narendra
Nov 26 '18 at 0:10
add a comment |
1 Answer
1
active
oldest
votes
Thanks for the Playground Manoj.
It looks like there was percentage height and width in html page and everytime user moves out from html page it re adjusts itself to available space and sometimes squeezes as well.
I was using the webview inside the GridLayout and setting the height and width 100% to that GridLayout solved my problem.
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440535%2funwanted-top-and-bottom-white-space-in-android-webview-after-keyboard-disappears%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for the Playground Manoj.
It looks like there was percentage height and width in html page and everytime user moves out from html page it re adjusts itself to available space and sometimes squeezes as well.
I was using the webview inside the GridLayout and setting the height and width 100% to that GridLayout solved my problem.
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
add a comment |
Thanks for the Playground Manoj.
It looks like there was percentage height and width in html page and everytime user moves out from html page it re adjusts itself to available space and sometimes squeezes as well.
I was using the webview inside the GridLayout and setting the height and width 100% to that GridLayout solved my problem.
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
add a comment |
Thanks for the Playground Manoj.
It looks like there was percentage height and width in html page and everytime user moves out from html page it re adjusts itself to available space and sometimes squeezes as well.
I was using the webview inside the GridLayout and setting the height and width 100% to that GridLayout solved my problem.
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
Thanks for the Playground Manoj.
It looks like there was percentage height and width in html page and everytime user moves out from html page it re adjusts itself to available space and sometimes squeezes as well.
I was using the webview inside the GridLayout and setting the height and width 100% to that GridLayout solved my problem.
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
answered Nov 29 '18 at 0:43
NarendraNarendra
2,0511823
2,0511823
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440535%2funwanted-top-and-bottom-white-space-in-android-webview-after-keyboard-disappears%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Is it when you focus on a textfield inside webview? I'm unable to reproduce the issue, can you update the Playground example so we can see the issue.
– Manoj
Nov 23 '18 at 6:36
It is when we press the back button to dismiss the keyboard, try to have some background color for body in html. will update the playground soon
– Narendra
Nov 23 '18 at 6:38
That's exactly what I tried and I was using Android 8.
– Manoj
Nov 23 '18 at 6:39
Thanks Manoj, that playground actually helped me. Looks Like my webview was inside a GridLayout and setting the height of that layout to 100% fixed the issue.
– Narendra
Nov 26 '18 at 0:10