I'm using the new panel widget from jQuery mobile. But i think it has a bug. I can't scroll inside the panel if its content is bigger then the actual "content".
To see what I mean, please check out this on an Android device and try to scroll inside the panel.
you can add two attributes in css to fix the scroll
height: 100%;
overflow-y: scroll;
<div data-role="panel" id="mypanel" style=" height: 100%; overflow-y: scroll;">
I hope this work in Android, Please try.
Problem is fixed with jquery-mobile 1.3 RC1.
Try to clear ui-panel-inner and add overflow: scroll to ui-panel
.ui-panel {
width: 17em;
min-height: 100%;
border-width: 0;
position: absolute !important;
overflow: scroll !important;
top: 0;
display: block;
padding: 0 !important;
margin: 0 !important;
}
.ui-panel-inner:after {
content: '.';
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
display: block;
}
Related
On desktop it works but on Android as if taking the position: absolute or nothing or I don't know.
This is my code:
#only_900{
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--backface-visibility: hidden !important;
--webkit-transform: translateZ(0);
}
#grid1wrap{
--webkit-backface-visibility: hidden !important;
--backface-visibility: hidden !important;
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--webkit-transform: translateZ(0);
}
I'm pretty sure that this problem is because of the way the various browsers interpret the code. I think that new browsers only make the html as big as the content inside, therefor the HTML and body are not reaching the bottom. Try adding the following CSS code.
html,
body {
height: 100%;
}
A child div with "pointer-events: auto" does not receive any events when parent has "pointer-events: none" on mobile. Same thing works perfectly on desktop browsers. Why is that?
Here's my setup:
HTML
<div class="top">
<div class="top-content">
<p>top content</p>
</div>
</div>
<div class="bottom">
<div class="bottom-content-positioning-helper"></div>
<div class="bottom-content">
<p>bottom content</p>
</div>
</div>
CSS
.top {
width: 100%;
height: 300px;
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 500;
overflow: auto;
}
.top-content {
background-color: red;
width: 100%;
height: 600px;
text-align: center;
}
.bottom {
position: absolute;
top: 150px;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
pointer-events: none;
}
.bottom-content-positioning-helper {
background-color: yellow;
width: 100%;
height: 150px;
display: inline-block;
vertical-align: top;
opacity: 0.5;
pointer-events: none;
}
.bottom-content {
background-color: green;
width: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
pointer-events: auto;
}
The two parent divs "top" and "bottom" with are stacked vertically. Both have a content div nested inside that is larger in height than their parent. As both parents also have "overflow: auto", they scroll their content. Nothing special until here.
When scrolling "bottom-content", it covers "top" until its middle and then crops any further scrolling.
In order to still be able to scroll "top-content" with a cursor in the lower half of "top", (while "bottom-content" is at scroll position 0), "pointer-events: none" and "auto" are used on "bottom" and "bottom-content".
Please check out my JSFiddle to better understand what's happening here.
Everything is working just fine on desktop browsers. But not at all on mobile. I tested it:
within a cordova app on iOS and android
on chrome and safari on iOS
on chrome on android
On mobile "bottom-content" is not scrolling, as it is not receiving any events. Even though, it is explicitly told to do so with "pointer-events: auto"...
Any hint much appreciated!
Ok, I still don't know why this is happening, but I found a way around it. I now read the touch events on the "bottom" element and reapply them to the scrollTop() property of THE SAME element via javascript. This sounds a bit weird, as this should be happening on its own, but it totally works! And the performance impact is minimal.
var lastScrollTop = 0;
var startY;
$(".bottom-content").on("touchstart", function(e){
//necessary for mobile browsers
startY = e.originalEvent.touches[0].clientY;
lastScrollTop = $(".bottom").scrollTop();
});
$(".bottom-content").on("touchmove", function(e){
//necessary for mobile browsers
var currentY = e.originalEvent.touches[0].clientY;
var scrollDistance = startY - currentY;
$(".bottom").scrollTop(scrollDistance + lastScrollTop);
e.preventDefault();
});
Here's the updated JSFiddle. Make sure to check it on desktop and on mobile again!
I've this small issue, I've created an HTML5 website with ASP.NET where the header is fixed, but on iPad and iPhone it scroll really slow so I had to use this small code in my CSS:
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
The scroll issue is gone but the fixed header doesn't work anymore on apple products. But on Windows and Android it works like a charm.
Also I had an autoplay video that plays when its visible and now it doesn't work anymore on any device.
My code:
<style>
body, html, form {
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
-webkit-transform: translateZ(0);
}
#wr {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
#header .fixed-menu {
position: fixed;
width: 100%;
z-index: 100;
}
#header .menu {
float: right;
font-family: 'Oswald', sans-serif;
font-size: 14px;
}
</style>
Please help (and sorry for my bad English)
i just finished developing my iOS Application with Cordova. So now i want to do the same on Android. Everything works fine but: You cant Overscroll the content. I have a fixed header/footer, then a Picture and then some navigation points.
On iOS you can Scroll the Content so that you can see the clients logo in the background. On Android this doesn't work, you can not overscroll the content to see the logo.
I read that -webkit-overflow-scrolling: touch and overflow: scroll doesn't work on Android. But those questions were from 2011. Is it still not possible to make the content overscrollable on Android?
Thank you!!
.ScrollableWrapper {
overflow: scroll;
-webkit-overflow-scrolling: touch; /*to make it smooth as native*/
background:url(../img/start/bg_wrapper.jpg)no-repeat scroll 0 0 / 320px 480px rgba(0, 0, 0, 0);
top: 45px;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
position: fixed;
}
#header {
padding-top: 0px;
margin: 0px;
position: fixed;
top: 0px;
left: 0px;
width: 320px;
z-index: 2;
max-height: 45px !important;
height: 45px !important;
}
#foooter {
position: fixed;
bottom: 0px;
z-index: 2000;
width: 100%;
height: 58px;
}
Maybe you can have a look at iScroll.
The task is to display block at center horizontally and vertically inside other block. I use this code
<div class="parent">
<div class="child"></div>
</div>
.parent {
background-color: #AFAFAF;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.child {
background-color: #FF0000;
bottom: 0;
height: 200px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 200px;
}
and it works great on browsers and iOS devices, but this is the case in mobile android devices (not tablet): the inner div gets pinned to the top left corner, but when I inspect element using Adobe Edge Inspect I see that highlighted area for this inner div is displayed correctly. How can I fix this issue with centering on Android mobile? The size of inner block will change so the desigion should be universal.
I used to align div horizontally and verticaly the way you're doing but it seems like this technique is not really cross browser. Instead I took a look at the way Facebook was doing.
The demo on JsFiddle
The HTML :
<table>
<tr>
<td><div class="square">Some text</div></td>
</tr>
</table>
The CSS :
html, body {
height: 100%;
width: 100%;
}
table {
margin: 0px auto;
height: 100%;
}
.square {
width: 150px;
height: 150px;
background-color: red;
}
NOTE : I recently took a look and it seems like Facebook changed the way they do it. They are still using table display properties but no more the table, tr and td tag (div instead).
The easiest way with your markup is {left:50%;margin-left:-100px;}.
Then the same with height. {top:50%;margin-top:-100px;}
In summary:
.child {
background-color: #FF0000;
height: 200px;
left: 50%;
position: fixed;
top: 50%;
width: 200px;
margin: -100px 0 0 -100px;
}