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...
Related
I have a mobile web chat app as shown screenshot
, I have a textbox at the bottom of screen which is in footer and on android browsers, the textbox is not coming up on focus whereas in ios its working fine. Can any one help. developement in ReactJs.
footer: {
zIndex: 2,
bottom: 0,
boxSizing: "border-box",
left: 0,
position: "absolute",
right: 0,
background: "#fff",
position: "relative",
padding: "0 10px",
boxShadow: "0px -1px 10px 0px rgba(0,0,0,.12)"
}
You have used the position property twice one is absolute and another is relative.
Try using only one value and see the result. Hope it will work.
I just used a simple logic by using jquery
Here I am Use HTML :
<div></div>
<footer>
<input type="text"/>
</footer>
Here I am use Jquery :
$(document).ready(function(){
$('div').click(function(){
$('footer').removeClass('make-top');
});
$('footer > input').click(function(){
$('footer').addClass('make-top');
});
});
Here the CSS :
div{
height:200px;
}
footer{
z-index: 2;
bottom: 0;
box-sizing: border-box;
left: 0;
position: fixed;
right: 0;
background: #fff;
position: relative;
padding: 0 10px;
box-shadow: 0px -1px 10px 0px rgba(0,0,0,.12);
transition:.5s;
}
#media (max-width:600px){
.make-top{
bottom:100px;// Mention the keyboard layout actual height.
}
}
Just take the keycode while the back button pressed : and remove this class via jquery..
I hope this will help.
Issues fixed. my main div when media max-width: 767px i was giving height 100% !important. this was stopping android webpages not to show textbox as the height was important and i removed it. but this was not causing issue in IOS browsers.
https://i.stack.imgur.com/SLPy5.png
A child div with "pointer-events: auto" does not receive any events when parent has "pointer-events: none" on mobile. Same thing works perfectly on desktop browsers. Why is that?
Here's my setup:
HTML
<div class="top">
<div class="top-content">
<p>top content</p>
</div>
</div>
<div class="bottom">
<div class="bottom-content-positioning-helper"></div>
<div class="bottom-content">
<p>bottom content</p>
</div>
</div>
CSS
.top {
width: 100%;
height: 300px;
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 500;
overflow: auto;
}
.top-content {
background-color: red;
width: 100%;
height: 600px;
text-align: center;
}
.bottom {
position: absolute;
top: 150px;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
pointer-events: none;
}
.bottom-content-positioning-helper {
background-color: yellow;
width: 100%;
height: 150px;
display: inline-block;
vertical-align: top;
opacity: 0.5;
pointer-events: none;
}
.bottom-content {
background-color: green;
width: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
pointer-events: auto;
}
The two parent divs "top" and "bottom" with are stacked vertically. Both have a content div nested inside that is larger in height than their parent. As both parents also have "overflow: auto", they scroll their content. Nothing special until here.
When scrolling "bottom-content", it covers "top" until its middle and then crops any further scrolling.
In order to still be able to scroll "top-content" with a cursor in the lower half of "top", (while "bottom-content" is at scroll position 0), "pointer-events: none" and "auto" are used on "bottom" and "bottom-content".
Please check out my JSFiddle to better understand what's happening here.
Everything is working just fine on desktop browsers. But not at all on mobile. I tested it:
within a cordova app on iOS and android
on chrome and safari on iOS
on chrome on android
On mobile "bottom-content" is not scrolling, as it is not receiving any events. Even though, it is explicitly told to do so with "pointer-events: auto"...
Any hint much appreciated!
Ok, I still don't know why this is happening, but I found a way around it. I now read the touch events on the "bottom" element and reapply them to the scrollTop() property of THE SAME element via javascript. This sounds a bit weird, as this should be happening on its own, but it totally works! And the performance impact is minimal.
var lastScrollTop = 0;
var startY;
$(".bottom-content").on("touchstart", function(e){
//necessary for mobile browsers
startY = e.originalEvent.touches[0].clientY;
lastScrollTop = $(".bottom").scrollTop();
});
$(".bottom-content").on("touchmove", function(e){
//necessary for mobile browsers
var currentY = e.originalEvent.touches[0].clientY;
var scrollDistance = startY - currentY;
$(".bottom").scrollTop(scrollDistance + lastScrollTop);
e.preventDefault();
});
Here's the updated JSFiddle. Make sure to check it on desktop and on mobile again!
People say to me that they somehow cannot find menu on my website when browsing on mobile devices. I use Twenty fourteen theme - of course there is a menu button, but people aren't so clever, or it's simple not intuitive. I would like to change the mobile menu button from "=" icon to simple "menu" text. Sorry for my english, polish native. Thanks in advance!
PS. I added in custom-css section something like that: .menu-toggle:before { content: "MENU"; } it changes the icon but if You look on my website www.bdk.brodnica.net using mobile browser there's still some problem with align or box size, tried to add width: parameter, but still don't work
Ok, when I finally got it i think it was simple, but it took me couple hours to find how to do that. Try add following code:
.menu-toggle:before {
color: #fff;
content: "MENU";
padding: 16px;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
padding-top: 20px;
}
.menu-toggle {
background-color: #000;
border-radius: 0;
cursor: pointer;
height: 48px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 70px;
}
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 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.