This issue i am facing while making android build for ionic app.
Though i have tried many suggestion which got through these following links . couldn't able to fix this . Can any1 suggest me some more suggestion . Any help i would appriciate .
https://github.com/driftyco/ionic/issues/4928
Make scrollbar visible in ionic content when using native scroll
try this. put this classes on the css file:
::-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;
}
.overflow-scroll {
overflow-y: auto !important;
}
To correct my Ionic scroll bar woes, I added the following CSS and HTML. It's presently working in my android App.
In html file I added following contents:
.theroot {
height: 250px;
background-color: #F5F5F5;
}
<ion-content>
<ion-scroll direction="y" class="theroot">
<div>
</div>
</ion-scroll>
</ion-content>
In style.css added following code
.theroot {
height: 250px;
background-color: #F5F5F5;
}
Related
I have scoured the web for simple ways to make a progress bar on a website that is consistent across all browsers. I have achieved this for PCs by using elements instead of the progress element and thought all was well until I looked at the website on my android phone using chrome browser app.
It would appear that Chrome for Android does not support this code?!
Can someone point me in the right direction to get this to appear correctly?
#percent {
background-color: black;
border-radius: 10px;
padding: 3px;
color: yellow;
height: 38px;
}
#inner {
background-color: white;
border-radius: 8px;
height: 100%;
width: 100%;
float: right;
}
#bar {
background-color: cyan;
border-radius: 8px;
text-align: center;
line-height: 38px;
color: blue;
height: 100%;
float: left;
}
<br><br><br>
<div id='percent'>
<div id='inner'>
<div style='width: 63%;' id='bar'><b>63% Full (1354.3 GiB Free)</b></div>
</div>
</div>
I tested the code using the (desktop) chrome device emulator and it runs fine on all sorts of devices. This does, however, not emulate the chrome app for android or IOS, but the aspect ratio of the device does not influence if the nested <div> renders or not.
I hope this gives you some insight into your problem.
P.S. Did you check if your chrome version is up-to-date? It might run an outdated version of html/css
To get scrollbars to appear in scrollable elements in a webview, such as a div, I used to use the following css styles:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
All worked fine until the latest update of Android webview, when all of a sudden the scrollbars no longer appeared. This is unacceptable for the web application I'm developing, which needs scrollbars to give the users a visual cue that there is more content if they scroll down. Does anybody know how to get the scrollbars appearing again with the lastest webview?
I think this URL is help full
http://manos.malihu.gr/jquery-custom-content-scroller/
When I try to use background-color: rgba(233, 233, 227, 0.72); on a mobile device (or Tablet) with Android, a problem occurs:
As you can see in the picture above, there is a horizontal line between the two divs. This problem only appears on Android devices: Android or Chrome browser.
On a desktop computer this code works fine.
If you want to try it:
http://jsfiddle.net/karmany/1y10cn0j/
Is this a bug on Chrome and Android browser?
Code:
.bckg {
background-color: blue;
}
.div-top, .div-bottom {
height: 50px;
background-color: rgba(233, 233, 227, 0.72);
background-clip: border-box;
width: 100%;
display: block;
padding: 0;
border: 0;
margin: 0;
box-shadow: none;
}
<div class="bckg">
<div class="div-top"></div>
<div class="div-bottom"></div>
</div>
It is definitely a bug in Chrome browser for Android. I've reported this issue: https://code.google.com/p/chromium/issues/detail?id=524068
I have the following HTML markup:
<div class="news_detail">
<span class="newspaper_icon"></span>
<span class="small_story_newspaper">Sky News</span>
</div>
and the following CSS applied:
.news_detail {
width: 33%;
float: right;
margin: 5px 0px;
text-align: center;
}
.newspaper_icon {
width: 17px;
height: 17px;
float: right;
margin: 0px 5px;
background: url("images/Mobile/hdpi.png") no-repeat scroll 0px -342px / 215px auto transparent;
display: inline-block;
}
.small_story_newspaper {
float: right;
font-size: 12px;
color: rgb(41, 169, 224);
}
It works perfect on all but android devices with Kitkat.
Any ideas?
I know that on Kitkat the WebView is using chromium now. Does chromium has issues with <span> that I need to know?
My guess would be that inline-block is not supported on mentioned device. Try display block with float. Also kitkat is only running on 1% of android devices, so I wouldnt bother
I'm using -webkit-scrollbar property to show scrollbars at iOS and Android but when I'm scrolling the container on a Android device the content flickers according to scrollbar width.
How can I solve this?
#container {
width: 200px;
height: 200px;
overflow-y: auto;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb {
margin-right: 5px;
border-radius: 5px;
background: rgba(255,255,255,0.5);
}
This can be done with a bit of Javascript.
<script>
// Add a .touch or .no-touch class to <html> based on device capability
document.documentElement.setAttribute('class',
'ontouchend' in document ? 'touch' : 'no-touch');
</script>
(Ensure that this line is placed before the CSS -- desktop browsers will not style the CSS otherwise.)
Pre-fix the ::webkit-scrollbar-* with a .no-touch class to ensure that only non-touch devices get the scrollbar style, and Android does not.
.no-touch ::-webkit-scrollbar {
width: 5px;
}
.no-touch ::-webkit-scrollbar-track {
background: rgba(0,0,0,0.5);
}
/* ... etc */
Now, non-touch devices will see a styled scrollbar. Touch devices will not.