On this site http://creeight.se/stackExample1/ the vertical dropdown menu works in my desktop browsers (Chrome,FF,IE10) but it's really buggy in Chrome for android. The menu uses .slideDown() to open submenus.
You see the problem if you open: "Bloggen - arkiv" then "2014".
An interesting thing is that if you scroll the page just a little bit down, it suddenly looks fine.
Fixed it.
In my css I had overflow: hidden; on all my li tags. I removed it and now it works.
Related
I got a weird problem with bootstrap 3 and the glyphicons!
The problem appears on my android mobile phone with Chrome (latest).
Problem description: If the font-face-statement exists in the bootstrap.css to load the glyphicon font file(s), the layout of the page gets a little bit broken.
On a windows phone, it's fine. It's fine # Firefox on a Desktop machine too and also in Chrome Desktop.
If I load the page the first time, the layout is OK! If i reload the page or change the page: The weird problem appears and keep! (-> Cache?)
E.g., screenshots from Android Mobile Chrome (latest):
Button group vertical with glypihcons. Icons are moved to the right. (Padding problem?)
Buttons with text # footer. (Padding problem at right side?)
Label for an input field. (It just breaks)
A self styled Checkbox + Label after it. (Unwanted new line break after the checkbox because the parent container is a lil' bit too small (width)...)
I don't know whats going on! If I remove the font-family for the Glyphicon Icons from bootstrap.css, everything is and keeps okay (insteat the missing glyphicon icons off course). If I let the font-face statement in the file, the problem occurs # android mobile phone.
Does someone already have had this problemand how can I fix this and what is the problem?
Fixed it for my self. It don't know what Chrome did, but clearing all the Chrome App Cache worked for me. The Problem was App related.
I have updated my Chrome browser to last version and I have the following problem:
When I select an option of a select menu it does not appear selected, I repeat the process of the selection and then it is selected OK. If I try to select other option it happens the same, first time bad, second time OK. It is happening since I have update to version 50 of Chrome, with previous version 49 it worked OK.
I am using a Huawei Y5 with Android 5.1.1, it happens the same with a Nexus with Android 6.
The version of jquery mobile that I have is 1.4.5
It seems only happens with Chrome version 50 in Android, in desktop works fine. In the browser that Huawei has, works OK.
To test this problem is easy, just go to the demo of select menu of jquery mobile:
http://demos.jquerymobile.com/1.4.5/selectmenu/
One important thing, in previous versions of jquery mobile works fine, examples:
http://demos.jquerymobile.com/1.3.2/widgets/selects/
Is there any way to resolve this problem? Any help would be appreciated.
Thanks in advance,
Félix.
I have to question the logic behind JQuery Mobile hiding the toolbars on select element focus by default. The native browser select elements overlay the page in their various special ways, and even the non-native select popup (which you get when specify the data attribute data-native-menu="false" in html or nativeMenu: false in the selectmenu options) is absolutely positioned as a dialog. This means that the toolbars really do not intrude on the real-estate given to the selectmenu options as they'll always overlay everything including the toolbars. To me, this makes the code from line 12664 - 12692 commented as: this hides the toolbars on a keyboard pop to give more screen room rather unnecessary for select elements.
Workaround/solution: thankfully jQuery-Mobile does nicely allow you to override this setting in your header/footer with the data-attribute data-hide-during-focus - simply set this to:
data-hide-during-focus="input, textarea"
and it won't try to hide the toolbars anymore when a select element gets focus.
i.e. simply change your header from this:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Header
</div><!-- /header -->
to:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="input, textarea">
Header
</div><!-- /header -->
... and the same goes for the footer.
Im using Ratchet Framework for andriod app development.
I have some scrolling problems in some android phones and also in bluestack.
when scrolled, a toomany blank spaces occurs and it affects the smooth scrolling. also affects the forms in the page. attached the image related
scrolling on some other devices is good , No extra space.
1) make sure you are using the meta tags provided by ratchet.
2) make sure you are inserting the bar-tab navigation at the top right after the body
From the ratchet getting started guide:
1. Fixed bars come first
All fixed bars (.bar) should always be the first thing in the of the page. This is really important!
2. Everything else goes in .content
Anything that's not a .bar should be put in a div with the class .content. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.
3. Don't forget your meta tags
They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.
If that doesn't help post some code and let us take a look at it
I have a very odd problem that doesn't happen in Chrome for Android, but it does happen when using a web view in an application in less than Android 4.4
The bug is:
When tapping in a 147px area near the sidebar, it causes the sidebar to open. This is because there is :hover on #sidebar. It is unexpected because the width is only 47px. It appears to be caused by overflow-y:auto. Removing this fixes the problem (But breaks the application as I need the scrolling)
I am using Android 4.3. It does NOT happen in 4.4 because the web view rendering engine is different.
The following behavior happens. I have a #sidebar that is collapsed at 47px
I have the following css.
#sidebar:hover
{
width:175px;
}
#sidebar
{
width:47px;
overflow-y:auto !important;
}
Here is a visual of the problem:
I am looking for a way to fix this and still retain functionality of overflow: auto
I found a workaround as this seems like a browser bug. I ended up doing min-height: 1000px on #sidebar instead of doing the overflow, this is not perfect but it works
i developed an android app by using html5 and phonegap (cordova 2.7.0); it's an application for image search, use the google API.
Returns a list of images that start with a tap.
It works perfectly on almost all devices, but on small screens with Android 2.3.x, scrolling (or click on image) does not work.
Any suggestions?
Thanks in advance.
You have run into an android bug. Overflowing DIVs inside BODY tag wont allow you to scroll. Same bug was there in iPhone (iOS < 5), but there atleast you could use two fingers and scroll.
However there are workarounds for it. You can use third party libraries such as iScroll, touchScroll ...
iScroll will disable your inputs for the div which you have applied scroll to. If its a simple paragraph use iScroll.
Reference
While 2-Stroker's answer is the correct one here is a quick and dirty solution, add a few <br> tags at the end. Worked for me ;)
If you don't want to go through the trouble of adding iScroll you can also use:
// Workaround for problematic scrolling behaviour on Android
// we can't fix this in css directly as it breaks iOS and the
// platform selector in css is unreliable
if ( device.platform === 'Android' ) {
$('.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active ').css("position", "initial");
}