I have a popup using jquery mobile in ios 7.0.4, but it appears under the header and footer, it should be on top, why this is happening and how to fix it.
Related
Weirdest thing, using JQuery Mobile 1.2.0. When a user travels to a page with a collapsible, clicking anywhere inside that collapsible div except on buttons adds ui-mobile-viewport-transitioning viewport-slidefade to the body, which is freezing the pane and hiding the scroll bar, and snapping the view to the top of the page. Before click :
<body class="ui-mobile-viewport ui-overlay-c">
After clicking inside a collapsible (Not anywhere else):
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-slidefade">
If I f5 and reload the page, it doesn't do this anymore. Only after following a link.
Example of a link that leads to the page :
<a href="ax_mer_view.cfm?MERID=XXX" class="ui-link-inherit">
<h3>Info here
</a>
This is happening on every single page across our entire mobile application, no matter the browser. iOS, Android, Chrome on PC, Firefox on PC, etc.
According to the documentation for jQuery Mobile 1.2 it should be possible to make arbitrary divs popup without them being pages:
<div data-role="popup" id="popupHelp">I should be hidden</div>
Until this is clicked!
This seems to work fine in Chrome on the PC: The div is hidden until this is clicked and the popup is displayed.
On the iPhone however the div is displayed (with X close button) below the page footer before the link is clicked.
Is this a bug or some legacy code not supported in JQM 1.3.1?
PS: I'm aware this question has been asked but no appropriate answer was given.
In my experience, the jQM popup is still pretty finicky. Make sure your popup div is defined within your page's content div (<div data-role="content">).
How can I make the side panel content scrollable in case there are many items, without scrolling the content on the main page (in JQM 1.3 Beta)? I am trying to implement this for an application running on both Desktop and Mobile browsers.Have looked everywhere, but cannot find the answer.
I've made a div inside the panel that is scrollable, but this doesn't work on iOS4 and below without 2-finger scrolling (div within div issue in iOS).
Please, visit the following to find the answer to the above question:
JQM 1.3 panel + iscrollview + dynamically loaded
http://forum.jquery.com/topic/jqm-1-3-panel-iscrollview-dynamically-loaded-pages
jquery-mobile-iscrollview
https://github.com/watusi/jquery-mobile-iscrollview
.ui-panel-inner .ui-content myElement {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
You can make the selector more specific to a given element or just leave the "ui-panel-inner" if you want the whole side panel to be scrollable.
Note: The "-webkit-overflow-scrolling: touch" adds native inertia scrolling to the overflow and is not needed if all you want is scroll functionality. This should work on webkit browsers; mobile safari and chrome. But I have only tested it on mobile safari. It will not work on mobile IE but again, I have not tested it.
jQuery mobile: can I do header/footer really css fixed (like css position:fixed)?
To fix header and footer i tried to use jquery-mobile's data-position="fixed"
But it looks like ugly on the phone: when I scroll, it appears, disappears and blinks, hm.. that is not what fixed mean to be in css if set header style to: style="position:fixed;z-index:1000" it looks much better - it just fixed and that is all
Is there a way to do it out of the box?
All your questions why this happens and how to fix it: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html
For archiving:
Known limitations
jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the position:fixed CSS property
True fixed toolbars: touchOverflowEnabled
In order to achieve true fixed toolbars, a browser needs to either support position:fixed or overflow:auto. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called touchOverflowEnabled that leverages the overflow:auto CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling
I have a form with an input element and a button and i'm using jquery ui for styling the button.
However in IE7 the button is not properly aligning with the input but works well in other browser like chrome or even IE8.
Is there a way to fix this ?