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.
Related
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/
I'm developing a website that has custom lightboxes. When the user activates a lightbox, there is a gray translucent div that comes behind the active lightbox. I've noticed on tablets (ios and android) there is about a 10 pixel margin on the right side where a scrollbar would be. I've tried the following CSS and it hasn't removed it:
#media (max-width: 767px) {
#gray_out {
margin-left: -20px;
margin-right: -20px;
}
}
html, body {
margin:0;
padding:0;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
Here is what it looks like on a desktop:
Here is what it looks like on a tablet:
Notice the bright yellow sliver.
The code for the div that provides the graying:
z-index: 99999;
background-color: rgba(0, 0, 0, 0.74902);
left: 0px;
right: 0px;
margin: 0px;
width: 802px;
height: 2034px;
position: absolute;
top: -0.00006103515625px;
The top value is generated with jQuery. Any advice would be greatly appreciated.
I can't provide a direct link to the site, and for this situation jsFiddle can't help because of the nature of the issue. Bear with me.
It seems obvious in hindsight, maybe there is a more elegant solution but eventually this is what I came up with:
#media (max-width: 1000px) {
#gray_out {
margin-left: -20px ;
margin-right: -20px;
width: 105%;
}
#home_footer, #home_header, #home_row_1, #home_row_2, #home_row_3 {
margin-left: -15px;
margin-right: -15px;
width: 102%;
}
}
Removing padding/margins wouldn't work, and that 10px sliver was actually interfering with more than the gray div, so I just made everything that much wider on mobile devices. I've tested it on a couple different versions of the iPad and a handful of Android devices on browserstack and it seems to be working well enough.
I am building a menu for my site to target mobile devices, and my default Android browser is acting very funny. I've stripped everything down to bare minimum, and as basic as i could to test everything out.
I am using jquery's .Toggle function to have my menu appear and disappear. It functions perfectly. Just as intended in all browsers. I went to test it on my mobile device and it worked / looked perfect in Firefox. Then I went to test it in the default Android browser. To my dismay there was a problem.
When you click the div that toggles the menu to make it appear the div moves to the left leaving a gap on the right side of the menu. What is funny is that I have a div inside of the menu container that retains its 100% width, and extends to the far right side of the screen. The css for the div inside of the menu div has practically the exact same css. So I am so confused as to why it is retaining it's 100% width but not my div that appears when toggled. Does anyone have any ideas? Below is a screen shot of the issue and my code.
html
<div id="mobilemenu">
<ul>
<li>Home</li>
<li>Random</li>
<li>Submit</li>
</ul>
<div id="mobilemenu-catdrop">
Categories
</div>
</div>
<script>
var flip = 0;
$("#click").click(function () {
$("#mobilemenu").toggle( flip++ % 2 == 0 );
});
</script>
css
/* header */
header {
background: #2e97de;
width: 100%;
height: 45px;
border-bottom: #287eb9 1px solid;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: block;
}
/* mobile menu */
#mobilemenu {
border-top: #8dc8f2 1px solid;
width: 100%;
background: #2e97de;
display: none;
}
#mobilemenu ul {
}
#mobilemenu li {
display: block;
}
#mobilemenu li a {
padding: 10px;
color: #95d3ff;
display: block;
text-decoration: none;
}
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
}
This is happening because the div #mobilemenu-catdrop is actually beyond the width of #mobilemenu since you're using padding with 100% width. use the border-box you're using on the header with that div instead:
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
I am using a simple jQuery/CSS accordion panel for a mobile website (coded as a flexible design with a few media queries thrown in). It's behaving as expected in most of the browsers I've been able to test, but there is a bug within the accordion in the default browser on my Android device (Galaxy Nexus, Android 4.2.2). When I open a panel, all of the contents jump into a weird formatting layout, but if I click on another panel or close the open panel, all of the contents jump into the layout I expected them to have.
The script:
$('.accordion > .heading > a, .accordion > .heading').on('click', function () {
var $next = ($(this).is('a') ? $(this).parent().next() : $(this).next());
$next.slideToggle();
return false;
});
The CSS:
.accordion {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.accordion .slidepanel {
background: #f6f6f6;
display: none;
margin: 0;
padding: 3%;
position: relative;
}
I have tried setting the panels to be open by default and all of the formatting within is as expected. I have racked my brain trying to figure out a fix for Android -- anyone out there got some other ideas?
Simple answer found after hours of this headache:
.accordion .slidepanel {
background: #f6f6f6;
display: none;
overflow: hidden; <<---
margin: 0;
padding: 3%;
position: relative;
}
Something to do with the height and width that the .slideToggle(); needs to calculate while it's doing its magic...
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.