I've been developing a website with a custom menu (ReactJS). But it doesn't work in Chrome and Safari on iOS.
Below is the code structure.
<Header>
<TopNavigation />
<MenuBox />
</Header>
<PageBody>
<TextContainer />
<PageBody>
When menu box appears, it should cover the whole page. But on iOS, the <TextContainer /> comes on top of the menu bar.
z-index of <Header /> is higher than that of <PageBody />
Any advice on why this is happening and how to solve this would be great.
Anyway couldn't find the reason to that behaviour in iOS. Then changed the layout and made it work.
<Header>
<TopNavigation />
</Header>
<MenuBox />
<PageBody>
<TextContainer />
<PageBody>
Related
I have a Phonegap 4.0 app in iOS with an <input />.
When I focus the <input />, the entire screen moves up, and does NOT resize. But I want the size of the screen to adjust to the new, smaller screen with keyboard.
Goal is to keep the header visible:
<header style="position:absolute; top:0: left:0; right:0; height: 30px;">
...
</header>
My current index.html viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0">
This has no effect:
<preference name="KeyboardShrinksView" value="false" />
Neither does adding height=device-height to viewport tag..
Change 'minimum-scale=1.0' to 'maximum-scale=1.0'. By using minimum-scale you are saying that the contents cannot resize any smaller, like when the keyboard comes up in your case.
Using phonegap in iOS I have a webview which is resized via Objective-C code.
I've edited the self.webview frame to the 80% of the device screen size, this is working properly.
When I load an html page inside the webview using phonegap, the page is always scrolling even if the page I've loaded is blank (so it's content can't be bigger than the webview size).
How can I set my pages to scroll only if the content size is bigger than the webview size? actually my html pages are always scrolling a bit vertically, like if they're bigger than the webview size and even bigger of the screen size.
I would like to have my htlm pages to scroll only if the real content is bigger than the webview size.
Add the following lines to config.xml:
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
I had the same problem and tried the same (repeated) solution of
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
with NO RESULTS!!!
BUT... I found the solution today!!!
The problem is that we are using the "PAGE" data-role without defining a "CONTENT" data-role. I added it like this:
<div id="myPage" data-role="page">
<div id="myPageContent" data-role="content">
(here all the page!)
</div>
</div>
and worked perfect!
Hope it helps you!
I use the 2.9.0 version of Phonegap and I want that when the keyboard appears my WebView shrinks like it's done in Android phonegap apps. I have footer and header elements in fixed position, and when the keyboard is open it causes trouble (the footer and header loose their fixed position state).
I think the KeyboardShrinksView settings could fix that, according to the phonegap documentation : http://docs.phonegap.com/en/2.9.0rc1/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS
But with a lot of try I'm not able to make it work, the WebView doesn't shrinks.
I was thinking maybe it can come from a conflict between others preferences set on my config.xml :
config.xml
<gap:platform name="ios" />
<gap:platform name="android" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="orientation" value="portrait" />
<preference name="KeyboardShrinksView" value="true" />
Or maybe it can come from meta tag definition, specially the viewport :
index.html
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
Do you know why it's not working ? Or do you have a workaround for this ?
EDIT : I had seen that it changes something when KeyboardShrinksView=true, but when the keyboard is open, it's hidding the bottom of my content (including my footer and the field) instead of resizing my whole content. I expect it's placing my footer just at the top of the keyboard, am I right ?
Thank you for your help
Yeah - this is a pain to deal with right now. Currently there is no real fix to make things like they used to be in iOS. Personally, I currently juggle two different tags in my apps (one for iOS and one for Android) and it gets close to the old behavior on iOS. Here's what I use:
<!-- IOS --> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />`
<!-- ANDROID --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
My config.xml settings are what you'd expect:
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="false" />
Here are a few links to keep an eye on and to keep bugging (i.e. requesting) that the Cordova folks finally fix it.
Issue CB-4862: https://issues.apache.org/jira/browse/CB-4862 (This is the core issue thread. It was originally closed but after a comment I made a while ago it was reopened)
Issue CB-5852: https://issues.apache.org/jira/browse/CB-5852 (This is where CB-4862 folks were told a possible fix might exist - but initial tests by devs show it's not really a solution sadly).
Hopefully these links will at least help get you up to date w/the latest info on the keyboardshrink related issues. If anyone else has leads/links on this please do share!
I fixed it by calling this code on every page change - :
$('input').unbind('focusout');
$(document).on('focusout', 'input', function() {
setTimeout(function() {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 500);
});
I am new to it and trying to create a simple mobile phone web page which calls external web pages. I have a button at bottom of page it is fixed. what i does, i call another page from same folder which has external links, i call the page through Object element. I am facing height problem when device in landscape view, only half of the page is display and the scroll bar also not moving further down. same when i click on external link of the called page.
need suggestion and help.........
<content style="width:95%;">
<!--<iframe src="h2.htm" id="iframe_a"></iframe>-->
<object id="vp" type="text/html" data="h2.htm" style="width:100%; overflow:scroll;"></object>
</content>
<!--<div id="siteloader"></div>
<script>
$("#siteloader")
.html('<object data="h2.htm">');
</script>-->
<div id="downloadButton" style="position:fixed; bottom:0; z-index:2; background:#fff; width:100%;"><input TYPE=SUBMIT Value="DOWNLOAD AT&T REMOTE SUPPORT" />
</div>
Currently I have a XUL notification box being displayed as I am developing a Firefox Addon. At the moment the notification box will only display at the bottom of the browser and cannot find any information about changing the position to the top of the browser.
I know you can use priority_high etc... but it only seems to add this again at the bottom of the browser.
Code:
<notificationbox flex="0.1">
<browser src="http://www.mozilla.org"/>
<notification type="warning" label="Test"/>
</notificationbox>
Any help will be grateful.
I have tested with XUL Explorer, I could change the positions successfully.
Here is the code:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- your code here -->
<stack>
<hbox flex="1" left="100" right="10" top="50" bottom="10">
<notificationbox flex="0.1" >
<browser src="http://www.mozilla.org"/>
<notification type="warning" label="Test" />
</notificationbox>
</hbox>
</stack>
</window>