I have an HTML page running in a webview, that has a header - list - footer.
When the list scrolls, it becomes visible behind the header, that must be static:
This is the header:
.q-layout-header {
background-color: #343a40;
position: fixed;
top: 0;
z-index: 10;
}
This only happened in iOS devices/Simulators. On Android, it works.
In your q-layout change your view property
<q-layout view="lhh Lpr lff">
and unedit the css class u edited
Related
I have pseudo element what covers a large part of the page. I want it to close a menu after click or tap, so I used onClick={this.handleClick} on the parent.
Everything works fine except iPhones :
onTouch it works like click - the menu is closing,
onTouchMove, onTouchEnd, onTouchStart it starts to scroll content under the menu (pseudo-element).
I want to prevent this scrolling content behind the menu. How to eliminate this touch event bubbling?
On Android, it works just fine.
&::after {
position: fixed;
top: 0;
left: 0;
width: 50px;
min-height: calc(100% - 25px);
content: $default-content;
}
I've implemented a simple left-pull burger menu in a mobile webpage that lives inside an iframe. However, it's behaving strangely on iPhones. We are using Bootstrap for the general page layout and stuff.
Using WeInRe I've noticed the following behaviour: in an iframe with 320px in fixed width, if I add, say, left: 50px to the body of the page inside it, this body moves 50px to the left just fine, but also starts to display 370px in width, instead of 320px as before.
The problem is worse: as the correct left value is a percentage, the body gets that bigger width, and after that the left is recalculated, making the menu larger than the viewport.
What the hell is happening here? Is this some sort of known bug of Mobile Safari?
Unfortunately, there's no public available code for this issue yet...
This is the relevant code:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>
Here's a sample, based on a series of side menus from a tutorial (click the left or right push options).
I'm creating an iOS app with partially native code and partially html5. A splash screen followed by a webview, that's all for native code, the rest of the content are implemented by html5 and will be shown in the webview. In the webview, the page is divided to 3 parts, titlebar on the top, content in the middle and tabbar on the bottom. I want the titlebar and tabbar each stay in their position, that is the very top and the very bottom in the webview no matter how the user scrolls the page, the content is scrollable of course, now how can I achieve this? What I have so far is the following, but when keep scrolling until hit the very top/bottom there will be a white gap at the top of the titlebar or at the bottom of the tabbar, like most iOS app, how can I avoid this?
.mobile-titlebar {
height: 44px;
border-bottom: 1px solid #border-color;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.page-content {
padding-top: 44px;
padding-bottom: 49px; /* Height of the footer element */
}
.mobile-tabbar {
height: 49px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
I managed to figure it out by adding the following line in my iOS native code:
self.webview_main.scrollView.bounces = NO;
Hope this helps someone.
I am attempting to use flexbox to achieve a series of sections that fill 100% width and height of the viewport. This works perfectly on desktop without any issues when resizing the browser window. On mobile however, whenever I change the orientation, the section sizing does not adjust correctly.
I have made a pen of my issue:
http://codepen.io/beefchimi/full/LlInw/
The flexbox css is:
main {
display: flex;
flex-flow: row wrap;
}
section {
display: flex;
flex: 1 0 100%;
height: 100vh;
}
article {
margin: auto;
}
I believe my implementation is correct... but I'm very surprised to see iOS not behaving as expected. Any suggestions on solving this problem?
Thanks!
Turns out this is an iOS 6 - 7 bug. More information can be found here:
https://github.com/scottjehl/Device-Bugs/issues/36
The github issue thread suggests a js plugin:
https://github.com/rodneyrehm/viewport-units-buggyfill
For my particular case, I simply implemented my own bit of jQuery that will measure the window height on window load, apply that value to all sections, then track the window height during window resize and reapply. An unfortunate work around :(
var $window = $(window),
$sections = $('section'),
windowHeight;
function adjustHeight() {
// get height of browser window on page load and resize events
windowHeight = $window.height();
// apply windowHeight to each <section>
$sections.height(windowHeight);
}
$window.resize(function() {
adjustHeight();
});
$window.load(function() {
adjustHeight();
});
jsFiddle links are at the bottom.
I have a Phonegap app that I have created with jQuery Mobile. The page transitions were really choppy and inconsistent in the native iOS app until I found this solution. It made my scrolling not so great, so I made a few changes per this follow-up article.
After the first solution and still after I implemented the second solution, the following code stopped working for me in my app:
$('html, body').animate({scrollTop: $('#specificID').offset().top}, 2500);
The above code scrolls the user down the page over 2.5 seconds to the DIV with the ID of specificID.
I have tried multiple things, but nothing seems to work:
$('#container').animate({scrollTop: $('#specificID').offset().top}, 2500);
$('html, body, #container').animate({scrollTop: $('#specificID').offset().top}, 2500);
$('.scrollable').animate({scrollTop: $('#specificID').offset().top}, 2500);
$(".scrollable").animate({ scrollTop: $("#specificID").scrollTop() }, 2500);
So, here is how I adjusted my jquery mobile code to fix the page transitions:
1. I wrapped [data-role="page"] DIV with container DIV
<body>
<div id="container">
<div data-role="page">
2. I added the following Javascript
$(document).one('mobileinit', function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
3. I added the following CSS
body {
margin: 0;
}
div#container {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
div[data-role="header"] {
position: absolute;
top: 0;
left: 0;
right: 0;
}
div[data-role="content"] {
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
}
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* iOS specific fix, don't use it on Android devices */
.scrollable > * {
-webkit-transform: translateZ(0px);
}
I setup three jsFiddles to show this:
Plain jQuery - scrollTop working: http://jsfiddle.net/pxJcD/1/
Transition Fix - scrollTop NOT working: http://jsfiddle.net/ytqke/3/
Transition Fix w/ Native Scrolling - scrollTop NOT working: http://jsfiddle.net/nrxMj/2/
The last jsFiddle is the solution that I am using and the one that I need to work. I provided the second one to show that the scrollTop functionality stopped before any of the native scrolling changes I made. Any thoughts on what I can do to be able to scroll down the page using javascript?
I’m using jQuery 1.8.2, jQuery Mobile 1.2.0, and Phonegap 2.2.0 (via Build).
Thank you for any help you can offer.
In your CSS, you have set your container's position property to Absolute.
Remove your div#container
It should work.
http://jsfiddle.net/nrxMj/16/