I have this style, and on web browser all is good, but when i run app on android device, scrollbar is hide.
.alert-message::-webkit-scrollbar {width: 5px;}
.alert-message::-webkit-scrollbar-track { border-radius: 10px;}
.alert-message::-webkit-scrollbar-thumb { border-radius: 10px; background: rgb(169,169,169); }
.alert-message::-webkit-scrollbar-thumb:window-inactive {background: rgb(128,128,128); }
You need to add this class:
$('html').addClass('android-scroll-bar');
I think this script is what you need:
<script>
$('html').addClass('android-scroll-bar');
</script>
Just add it in your header. For more information:
Similar question
Related
I'm trying to set a background image for an spn web app and I need the background to be fixed (that it won't be scrolled with the rest of the page).
this is the body css:
body {
background-color: rgb(51, 102, 102);
background-image: url('../images/background.png');
background-attachment: fixed;
background-position: center;
color: #eee;
}
Safari in IOS and Chrome on Android repeat the background instead of fixing it at one point.
I've seen on the internet it's been disabled on mobile but is there a solution?
background-repeat: no-repeat;
background-position: center center;
There are other options to doing this but this is the only one that actually worked for me; and i tried just about all of them.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
I am using overflow-scroll = "true" to make ionic use native scrolling :
<ion-content overflow-scroll = "true">
<ion-list>
<ion-item ng-repeat="foo in bar">
{{foo.label}}
</ion-item>
</ion-list>
</ion-content>
This really works great (performances are really good). The only problem is that the (vertical) scrollbar disappeared.
As per the documentation, I tried adding scrollbar-y="true" to ion-content, but that didn't work.
I also tried adding this to my css :
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}
::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
... but that didn't work either.
This article (look for "native scrolling") says that the problem can be solved using css, though.
Does anybody know how to do it ?
The answer suggested by #Gerhard Carbó is closest I've found to a solution so far... It does kind of work but :
The scrollbar doesn't autohide
Animation is very jerky
So I believe I'll stick with no scrollbar for now.
Also please note this works fine on Google Chrome on android, so hopefully it's going to be fixed someday. But why is webview is so much behind chrome, I fail to understand...
This can be done by ionic built in scroll directive.
<ion-scroll></ion-scroll>
Check this out:
http://codepen.io/calendee/pen/nzeCy?editors=1100
I have a local page in android webview, pages's html and body both has width:100%;height:100%;overflow:hidden; , and the #result-popup-wrap has the following css:
#result-popup-wrap {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 245px;
background: #fbfbfb;
border-top: 1px solid #dcd9d5;
-webkit-transform: translateY(100%);
}
but, as you see, when I scroll to bottom of the page, I can see the #result-popup-wrap, which should not be visible.
Any help is appreciated!
Just for anyone who are suffering the same problem.
ADD position:relative to the <body> tag.
Apparently, this is a bug of WebView, on both Android and iOS. On chrome of PC version, page renders OK without body{position:relative;}, but in WebView, you can scroll the entire page, including the 'hidden' #result-popup-wrap.
click here to see demo , pay attention to the UPPER comment in css
you can set body{position:fixed;top:0} to the body.
Any ideas how to remove the gap (on the screen) whitch appears during scrolling?
Header has position fixed and the gap appears only on Androd (tested on Android 4.0.4).
Part of the code responsible for the header:
HTML:
<div data-role="page" id="settings">
<div class="holo-action-bar">
<h1><span>Settings</span></h1>
</div>
<div class="content content-inner"></div>
</div>
CSS:
.holo-action-bar {
background-color: #333;
color: #fff;
display: block;
position: fixed;
top: 0; right: 0; left: 0;
width: 100%;
z-index: 1000;
}
Also you can see example at jquery mobile docs
UPDATE:
The problem doesn't occur on iOS (tested on iOS 5+)
I found the solution :
this is CSS problem on phonegap.
body {
<< height : 100%; don't use it >>
width: 100%;
margin:0;
padding:0;
top: -1px;
}
HardwareAccelaration : true
But delete your data-position="fixed"
make a class
<div id="header"><h1>Fixed header!</h1></div>
css:
#header{
position:fixed;
top:0;
}
EDIT *
Have you tried to check the margin on your inner object?
if its a p tag or h1 or so they have standard margin
if i check out the link you gave btw i dont like jquery mobile cause it gives more problems than it helps tbh.. but anyhow
it seems that it have a border on 1px or so do you have a link to your site?
I had the same issue and I solved it accidentally when I added this line in my activity.java:
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
and android:hardwareAccelerated="true" in the manifest under the <application> tag. This tries to disable the software renderer in favor of the hardware one, and it worked on my 4.0.1 device.
If you are using webview with the fixed header and footer, you also might want to add the following too so the flashing animation over the header/footer disappears:
mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
I have got the 1px gap above the fixed header in an Android 4 pad, when using Intel App Framework 2 with Cordova 3.0.0. With the target Android version set to 4.3.
The problem was not there when I set the target Android version to 2.3.3 in previous projects.
At the end I found that when I set hardwareAccelerated="false" (in two places) in AndroidManifest.xml, the 1 px gap is gone.
when I build bottom toolbar in HTML I use the following code:
.bottomMenu
{
position: fixed;
bottom: 0px;
width: 100%;
}
.bottomMenu div
{
text-align: center;
white-space:nowrap;
}
the problem is that it work just fine in ordinary browser but it does'nt work in mobile browser such as iphone or android.
how to solve this problem?
thanks in advance.
Kobi
The problem is fixed positioning, which isn't really supported by iOS<5 and Android<3: http://caniuse.com/#search=fixed
Search for 'position fixed iOS' or something like that for lot's of alternative solutions :)