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
Related
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
I'm having some issues getting the 'overscroll glow' to work on a scrollable div.
The first problem is finding answers or documentation on this because this thing has a lot of names, I'm not entirely sure what the correct term is and most of them I tried confuse google (i get a lot of results for 'overflow:auto;' etc). So for clarity, here's an image of the effect I'm looking for:
Anyway, my problem is this: I did have this effect when my html/body elements were scrollable but when I moved things to divs (in this case the .content element), it stopped working.
Something like this:
html, body {
overflow: hidden;
width:100%;
height:100%;
margin:0;
padding:0;
}
.appbar {
position: absolute;
top:0; left:0; right:0;
height:56px;
background-color:#ccc;
}
.content {
position: absolute;
top:56px; left:0; right:0; bottom:0;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
}
.make-it-scrollable {
height:200%;
}
<body>
<div class="appbar"></div>
<div class="content">
<div class="make-it-scrollable"></div>
</div>
</body>
On iOS I get the elastic 'rubber banding' effect when I try to scroll past the content (thanks to the -webkit-overflow-scrolling) but on Android I get nothing.
Is this by design? (meaning: is the overscroll effect disabled or 'not implemented' for divs with overflow:x?
Or am I missing something?
Oh btw I'm testing this on Android 5.1 with the latest Chromium based webview (it's a cordova app)
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.
So I'm still new to the whole css and div thing, pardon my bad coding. :/ Anyways, I have finished a site but oddly the side navbar does not appear on mobile browsers such as Chrome and the default android one. Any ideas as to why? All help is appreciated.
http://escobarboxing.com/
Also, I've tested it on my Desktop via Chrome, FF, and Opera and it appears to be working fine but another user using Chrome said he did not see it?
Yep, that's because of this: #menu{position: absolute;}
Because the position is absolute, and the main content is centered, when you get to a small screen size, the menu goes behind the content. You can experiment with this just by resizing your screen really narrow.
For a quick fix, remove the position: absolute, which will fix your problem, but here's what I recommend:
Remove position absolute and relative from #menu and #container. Remove Margin right and left: auto from #container, then float #container left (float:left;). Finally, apply the auto left and right margins to #site (you'll need to specify a width first, looks like 920px should work). The #menu will stay next to the #container, and both will be centered with regards to the page.
For good measure, I'd add a 100% height and width div (#wrapper) above site.
Also, side note, if you put "position: absolute;" on anything, it's removed from the 'flow' of elements, so margins won't affect it. Here's a great article that helped me figure out position: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Welcome to CSS! It's fun, and sometimes aggravating. I hope you enjoy.
Try using %'s instead of fixed widths. What's happening is on smaller screens the menu is covered by your content block because the block is to big for the screen. To see what I mean open the site with your smartphone then adjust the size of your container down. You will see your menu appear when you refresh. I have firefox on this laptop and the menu doesn't show for me either.
You should try adding the menu div to container and remove position absolute.I see too many divs so try using less divs. why do you need that cssmenu div?
<div id="container">
<div id="menu">
<div id="cssmenu">
</div>
</div>
<div class="insta">
</div>
rest of content
</div> end container
.insta {
color: #333333;
width: 100%;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 0 10px 0 #000;
-webkit-box-shadow: 0 0 10px 0 #000;
box-shadow: 0 0 10px 0 #000;
background: #EDEDED;
float:right;
width:770px;
}
#container {
overflow: auto;
height: auto;
width:920px;
margin:0 auto;
}
#menu {
float: left;
margin-top: 25px;
}
Hope this answer helps.
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.