I'm trying to use overflow: auto in a PhoneGap app on Android, but the scrolling frequently does not work: on Android 4.1 it occasionally sticks; on Android 4.3, items will generally scroll one time (not necessarily the first time), and then never again.
The CSS I'm using to apply overflow is:
.overthrow {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
I was using filamentgroup's overthrow library, but as we are no longer supporting versions of Android/iOS that do not (nominally) support overflow: auto, we're no longer using it.
The scrollable areas work perfectly on iOS and in Chrome.
I found the solution to my problem.
.overthrow {
overflow-x: hidden;
overflow-y: auto;
border :1px solid transparent;
-webkit-overflow-scrolling: touch;
}
Related
I'm migrating a web map from OL2x to OL3. I've started with the OpenGeo web app builder (thanks, Boundless!) and have a functional map.... except for the layerswitcher on Chrome and Firefox on my Android phone and tablet. My map has a large-ish number of layers and so the layerswitcher needs to be scrollable for the user to see all of the layers. The scrolling behavior is working as expected on Chrome and Edge on a Windows Desktop machine. I have a temporary version of the app here: http://rainpursuit.org/ol3/
Here's the CSS that I've tried for the LS "container"
.layer-switcher {
position: absolute;
top: 3.5em;
right: 0.5em;
text-align: left;
}
And for the "layer-tree-panel"
.layer-tree-panel {
padding-right: 50px;
border: 1px solid #cccccc;
background-color: white;
height: auto;
max-height: 500px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
opacity: 1;
z-index: 0;
translateZ: (0);
-webkit-translateZ: (0);
}
Any suggestions on how to make this scrollable on touch devices that don't have a mouse to hover over the LS divs?
Thanks
I believe the web map builder uses an early version of the ol3-layerswitcher, see this issue which resulted in scrolling being fixed on touch devices. The examples in the repo include one for scrolling.
Does anybody know whether PhoneGap's Android browser supports CSS3 flex box?
When I run the code in browser it worked correctly but when it comes to my Android device it does not work.
Here is the code:
.di {
float:left;
width:100%;
text-align:left;
display:flex;
}
.di span {
background:url('img/smallphone.png') no-repeat;
height:15px;
border:1px solid #005522;
float:left;
width:24.2%;
text-align:center;
border-radius: 10px;
background-color:white;
flex:1
}
Actually, phonegap does not support any css.
Phonegap uses a webview, which means it uses the default browser of the device.
So the css support depends on the browser of the device, which means you will have different css behaviour with the same app if you run it on an android 2.3, 4.0, 4.1 or 4.4.
And sometimes the support may be different for a given version of android if you use different brand of device.
That's the main problem with phonegap.
That said, it seems flex box are supported since android 2.1 : http://caniuse.com/#feat=flexbox but you need to add the prefix -webkit
try this :
.di {
float:left;
width:100%;
text-align:left;
display: -webkit-flex;
display:flex;
}
.di span {
background:url('img/smallphone.png') no-repeat;
height:15px;
border:1px solid #005522;
float:left;
width:24.2%;
text-align:center;
border-radius: 10px;
background-color:white;
-webkit-flex: 1;
flex:1;
}
I have an element which I animte with translate3d transform. The parent element has overflow: hidden, but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element.
Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough.
It works fine on all other mobile and desktop browsers I tested on.
I guess this is a Firefox Mobile bug, but does anyone have a workaround for this?
Here is jsfiddle link for testing: http://jsfiddle.net/dioslaska/6h8qe/
The minimal test case:
HTML:
<div id="cont">
<div id="translate">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
Css:
#cont {
width: 50px;
height: 90px;
border: 1px solid black;
margin: 20px;
overflow: hidden;
}
#translate {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}
#translate.a {
-webkit-transform: translate3d(0, -60px,0);
-moz-transform: translate3d(0, -60px,0);
}
#translate div {
height: 30px;
line-height: 30px;
text-align: center;
}
UPDATE: It looks like the problem is solved in Firefox 27.
After a lot of searching I found a workaround here:
http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/
Adding a background and opacity: .99 to the container element seems to solve the problem.
But still no information about what causes the problem
I tried the opacity: .99 hack but it was causing the layout to get pushed down..
so i tried another hack which i find that worked by applying this to your style sheet:
* {
outline: 1px solid transparent;
}
I'm sorry, but I seems found a more simple solution.
Without layout damage.
If scrolling container has height a more over than device height then this issue disappearing.
It's has a different values for portrait and landscape orientation.
It's really work with Sencha Touch 2 at FF v.23 on Android 4.0.4 for me.
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last
We are using Ajax call to fetch a list of strings and display using a widget on JSP page developed for android web application.
We are facing the issue as strings are displayed limited to the widget’s size and not scrollable in the android emulator. However, the same code works fine in Internet explorer on desktop.
The css used for the above widget is:
jquery-ui-1.8.13.custom.css
Class in the above css specific to widget display:
.ui-autocomplete {
position: absolute;
cursor: default;
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
The overflow-y: auto enables the vertical scrollbar in IE but the same doesn’t on Android Emulator.
Any help or pointers to enable the above functionality in android would be great
The Android browser has a bug that causes overflow:auto to be treated as overflow:hidden.
http://code.google.com/p/android/issues/detail?id=2911
I'm not aware of a workaround for this; you might want to reformat the page for mobile.