I'm creating webview application in android using jquery mobile framework.
I need to show table that has width more than screen.
The horizontal scrollbar is not showing.
I have tried many ways but none worked for me.. (a lot of people facing the same problem with me, i have tried all of google search result link in page 1 to 3, some link from stackoverflow too)
Any suggestion?
*sorry for my bad english..
I had a very similar problem, and I found a workaround (bug-fix?) for my situation via some experimentation.
In the JQuery Mobile CSS file ("jquery.mobile-1.1.0-rc.2.css" for me), I changed line 1119 from:
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
to:
.ui-content { border-width: 0; overflow: visible; overflow-x: scroll; padding: 15px; }
This allowed my CSS (with absolute widths and coordinates) to be scrollable horizontally.
Once you modify your local copy of the JQuery Mobile CSS, don't forget to change the link in your html header.
Again, I'm not sure if the previous behavior was intentional or not. It may very well be inline with the design goals of the Jquery Mobile team. But this change worked for me. Hope it helps.
I suspect this is a bug that I found in this forum.
http://forum.jquery.com/topic/horizontal-scroll-views
But here they talk about some other alternative for this called swipe by which you can achive this
There are already some talk about this in site itself and you can refer it.
Swipe among activities in android
Related
I am completely at a loss here, and because I don't have an Android device, it's been very hard to figure out what's going on, and can't duplicate it in the simulator. For reasons unknown, Chrome on Android is having issues focusing form fields, and users are starting to complain. Everything works fine on other platforms - including Chrome on Windows/Mac/iOS.
The site having the problems is no longer broken, as the problem was resolved.
Any guidance would be hugely appreciated.
I did some testing locally and confirmed that my comment is correct. If you set the vimeo iframe to display: none; that will allow the form elements to be tapped on android / chrome. So you'll need to make three changes:
css update: set vimeo iframe to display: none
javascript update - where you normally set vimeo's iframe to visibility:visible, you'll also have to set display:block
javascript update - similar to above, where you set vimeo's iframe to visibility:hidden, you'll also have to set display: none
I believe that will solve the problem and have no negative side effects.
Vimeo iframe is taking the focus, hence the input fields are not clickable.
Set the width and padding-top to the modal containing Vimeo iframe only when the modal is selected.
Change following css selector :
.modal .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
to
.modal .modal-state:checked+.modal-window .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
That website is very laggy on my device, perhaps you should reconsider the design. Or make it simpler for tablets/phones.
Nevertheless I found that text fields that follow (including) "What are your three favourite movies?" can be focused properly, and it seems there's some view on top of the first text fields in this form.
Perhaps that can lead you in the right direction. Good luck!
Although my site isn't the best, it's a mash of HTML and isn't even responsive, it works as expected in every browser except for the Android Browser. I have a secreenshot below of the select box in the android browser, and then in every other browser. I'm really not sure how to approach this as I generally work things out in the end with trial and error, and like I said my code really isn't that good!
Any help would really be appreciated :) thanks very much.
Android (using www.modern.ie to test):
Other browsers:
The CSS for the select box:
#form .input-select {
background: url(../images/field-bg.png) repeat-x;
height: 30px;
width: 210px;
border: 1px solid #c2c2c2;
border-radius: .2em;
font-size: 14px;
padding: 5px;
-webkit-appearance:menulist;
Form elements are among the most unreliable parts of HTML/CSS regarding cross-browser rendering consistency. Especially some properties of the box model (height in conclusion with border or padding) are troublesome.
Citing from that article:
Developers tried to fix this problem by turning these elements [input, select] into block-level elements. [...] A common pattern to solve this problem is to avoid the height property and instead to use the font-size and padding properties.
A great CSS collection to start with is normalize.css. You should think about using (parts of) it, to get as much rendering consistency as possible.
You are already using em as unit for border-radius, for scalability in older browsers, especially IE 6-8, you could go for ems for all length units.
I've forked your fiddle, to include those ideas. See http://jsfiddle.net/Volker_E/4v3sm71g/
By the way, Chrome v36.0.x on Android 4.4 doesn't show a difference at all per default.
#form .input-select {
? float:right; ?
clear:right;
}
#form label {
? float:left; ?
clear:left;
}
I have read 10+ questions concerning this issue, yet no one solved it for me..
I have uploaded the app in a github publich repository, and there is the phone gap build link. I'm testing on PC-Browser (chrome) using "Ripple" simulator, it's working fine. But when I test on my phone (Samsung Note 3), it gives weird transitions other than slide!!
as much as I can tell, it fades then slides, which gives a horrible transition effect. =(...
Please Advice..
[UPDATE] Feel free to edit the repo (if possible)
I couldn't find any suitable solution for this issue but I have something like a hack to overcome it
upgrade your jQuery mobile to JQUERY MOBILE 1.4.0 RC1 or anything above, this will make your animations faster and smoother.
add those lines to your css main file:
/** To fix white flash between transitions**/
.ui-overlay-a {
background-image: url(../img/bg.png) !important;
background-repeat: repeat !important;
background-color: #182633 !important;
}
.ui-page {
-webkit-backface-visibility: hidden;
}
update ".ui-overlay-a" css with corrosponding backgorund color and image.
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last
Can you make the overflow content of a div scrollable in the Android browser?
It is scrollable in all other modern browsers.
In iOS it is scrollable - however it does not show scrollbars - but it is scrollable via dragging.
A simple example:
http://jsfiddle.net/KPuW5/1/embedded/result/
Will this be fixed soon?
Android 3.0 and higher have support for overflow:scroll, on < 3.0 it's another story. You might have some success with polyfills like iScroll, however that does come at a cost. It's difficult to implement on sites with complex layouts, and you need to a call a method everytime the content on your site changes. Memory use is also an issue: on already underpowered devices performance may lag because of these kinds of polyfills.
I would recommend a different approach: use Modernizr to detect support for overflow scrolling , add a class to your html tag and use that to rewrite your CSS so that pages scroll 'normally' instead of in a box.
/* For browsers that support overflow scrolling */
#div {
height: 400px;
overflow: auto;
}
/* And for browsers that don't */
html.no-overflowscrolling #div {
height: auto;
}
overflow: scroll; is supported as of Android 3 (API 11).
For a cross-platform (namely iOS <=4.3.2) Cubiq iScroll is an easy-to-implement fix.
You could try touchscoll.js for scrollable div elements
Just for completeness:
The scrollbars are actually there in Android 2.3, but they are very buggy and by default they are styled to have 0 width, so they are invisible.
You can make them visible by adding styling like:
::-webkit-scrollbar {
width: 30px;
}
::-webkit-scrollbar-track {
background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
background-color: $lightgrey;
}
However, the thumb element is not draggable, you can only move it by tapping the track underneath or above it.
Also, these styles will change the look of your scrollbars in all webkit browsers, so best you should add a class that only applies to Android 2.3.
You can make a DIV scrollable in Android by defining the styles of the scrollbar in your CSS.
This article show you how to do it:
http://css-tricks.com/custom-scrollbars-in-webkit/