iPad Keyboard Overlapping Web Page
On a page we have a canvas with some tools that are positioned fixed at the bottom of the screen. When you click on a text box on the canvas (using fabricJS) the keyboard comes in and overlaps the page on iPad and iPhone which means you can't get to the fixed positioned elements that are at the bottom of the screen under the keyboard unless you scroll all the way down.
Ideally what i need is for the iPad keyboard to push the html body up like it does on a mobile app. Is there a way to accomplish this? If not i will have to come up with another solution.
Any solution would be helpful, can be CSS or JavaScript or jQuery, or a mix, as long as it can solve the problem.
javascript ios css fabricjs fabricjs2
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
add a comment |
On a page we have a canvas with some tools that are positioned fixed at the bottom of the screen. When you click on a text box on the canvas (using fabricJS) the keyboard comes in and overlaps the page on iPad and iPhone which means you can't get to the fixed positioned elements that are at the bottom of the screen under the keyboard unless you scroll all the way down.
Ideally what i need is for the iPad keyboard to push the html body up like it does on a mobile app. Is there a way to accomplish this? If not i will have to come up with another solution.
Any solution would be helpful, can be CSS or JavaScript or jQuery, or a mix, as long as it can solve the problem.
javascript ios css fabricjs fabricjs2
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
add a comment |
On a page we have a canvas with some tools that are positioned fixed at the bottom of the screen. When you click on a text box on the canvas (using fabricJS) the keyboard comes in and overlaps the page on iPad and iPhone which means you can't get to the fixed positioned elements that are at the bottom of the screen under the keyboard unless you scroll all the way down.
Ideally what i need is for the iPad keyboard to push the html body up like it does on a mobile app. Is there a way to accomplish this? If not i will have to come up with another solution.
Any solution would be helpful, can be CSS or JavaScript or jQuery, or a mix, as long as it can solve the problem.
javascript ios css fabricjs fabricjs2
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
On a page we have a canvas with some tools that are positioned fixed at the bottom of the screen. When you click on a text box on the canvas (using fabricJS) the keyboard comes in and overlaps the page on iPad and iPhone which means you can't get to the fixed positioned elements that are at the bottom of the screen under the keyboard unless you scroll all the way down.
Ideally what i need is for the iPad keyboard to push the html body up like it does on a mobile app. Is there a way to accomplish this? If not i will have to come up with another solution.
Any solution would be helpful, can be CSS or JavaScript or jQuery, or a mix, as long as it can solve the problem.
javascript ios css fabricjs fabricjs2
javascript ios css fabricjs fabricjs2
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
asked Nov 27 '18 at 15:15
Glen ElkinsGlen Elkins
1839
1839
add a comment |
add a comment |
0
active
oldest
votes
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%2f53502694%2fipad-keyboard-overlapping-web-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53502694%2fipad-keyboard-overlapping-web-page%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
