I've an interesting bug here for a Phonegap application in android. I first noticed that the scrolling wasn't working in the emulator, or on some specific devices (It does work on my phone, wich is platform 2.3) and tried every recommendation to fix that including multiple here in SO suggesting; 1, native side fixes and 2, adding the iScroll library. However, none of the solutions worked. Also the unavailable scrolling only affected specific pages, and not the entire app.
I've narrowed the problem down to this line of code, which replaces the src attribute of an iframe. It is intended to show the thumbnail of a youtube video where the url is being obtained via an external content api.
$('#video').attr('src', newUrl);
and the iFrame markup
<iframe class="youtube-player" id="video" type="text/html" src="js/views/loading.html" frameborder="0"></iframe>
I've tried hard coding the url in the markup, and it works fine, It's something about the act of replacing the iframe's source that breaks page scrolling.
I'm sing Phonegap/Cordova 1.8.1 and the minimum target android platform is 2.2
Thank you in advance for any help.
*Edit: Seems to be something involved with the viewport as removing the tag stops whatever is breaking the scrolling.
I had a similar issue with an Android application I was creating using PhoneGap. The issue I had was that as the data in the iframe changed, the amount of scroll-able space changed as well so some pages would scroll too far and some not enough.
In order to fix this, you have to use some JavaScript to adjust the height of the iframe based on it's content when the content is loaded.
I found my answer from this question: Phonegap HTML5 / Android App - Iframe height issue
The answer from that question suggests using the onload attribute on the iframe to call a javascript function that adjusts the height of the iframe to match the content.
The javascript itself looks like this: where obj is the iframe element that gets passed into the function.
function resizeIFrame(obj){
obj.style.height = obj.contentWindow.document.body.offsetHeight + "px";
}
Now, anytime the source of the iframe changes, it will adjust the height based on that content and should fix your scrolling issue.
Related
I'm currently working on an Android app that displays a simple html-document with some css. However, the html changes based on the day, once I've gotten that implemented at least, so there will some days where it will have more elements than it did previously. Now, where the problem lies, is that when there are a many elements, the bottom ones won't show. They are hidden outside the screen, and there is no scrolling.
How would I go about making the page scrollable? This is only for android. I can't use iScroll, seeing that it requires a list-structure in the html, which I don't have and it would be a pain to rewrite the script that makes the html file :/
Thanks
I'm building a phonegap(cordova) application and it is working great for android, but there is some scrolling issue with iOS build i-e i cannot scroll pages from anywhere on the screen except the middle-right and middle-left of the screen and that area is very less, i want to scroll by swiping anywhere on the screen just like it works in Android.
Anyone else faces the same issue, share your knowledge and experience.
Although without a code sample it is difficult to advice.. I had similar experiences in ios phonegap development and you need to be sure that the css overflow attribute is correctly setup for all elements.
One major 'trick' that you need is to add
-webkit-overflow-scrolling: touch;
To the container you like to scroll.
See this page for info about the css property.
I am working on a webapp which uses the latest bootstrap (3.1.1). I use this carousel sample app to build the main skeleton of the app.
In each of the slides I will have my actual page content. In one of the slides I generate tables with a different width.
The problem seems to appear only in Android Webview when the width of the table is bigger than the actual width of the device. The navbar gets white or invisible. I am not sure, but I can not see it. I am able to click on the navbar toggle(even though doesn't appear) and it does show the navbar items.
Did anybody else had this problem before ? It only seems to happen in the android webview. I tested this in chrome for android and everything works as expected.
I will try to reproduce this in a fiddle, but I hope I can get some tips by then.
Florin.
UPDATE: fiddle here: http://www.bootply.com/123049 (please test the fiddle in Android webview).
I found out that the position:fixed applied to different elements behaves buggy in android default webview. more details (maybe a possible solution) here: follow the link
also try to set the metatag like following:
<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />
For iOS 5 link here iOS issue with position fixed explained
A solution that I specifically found for my problem was setting sScrollX datatables parameter to 100% (datatables is the script used to generate tables).
Also here caniuse stats: http://caniuse.com/css-fixed
I am making a slider with three different videos. I have some problems regarding the youtube videos embedding as if i embed the videos using object parameter, it works fine on each and every device except on MAC. I applied an alternative for this as i embedded the videos using iframe, now its fine everywhere but the problem occured is, the scrolling effect of the screen has stopped working on Android phones. I have tried applying js codes but still its stuck on Android. URL for my design is as follows if anybody wants to test the design on their end:
http://g-axon.com/minisite/
Please provide a proper solution if you have any.
Try not setting the divs with the class oneByOne_item to display:none.
Setting them to display:none will actually remove them from the render DOM.
And you dont need to that since the container is overflow:hidden anyway..
Does anyone know how well the iFrame HTML tag is supported on Android? Some of my preliminary research indicates that it is supported, but scrolling can be hit or miss and should be avoided. Is there documentation on this anywhere or am I going to have to get ahold of devices to test on?
Android supports the iFrame tag but not the scroll attribute. I had the same issue. Leave off the scroll attribute and the iFrame will display.
I don't know how Android handles frames, plus different Android roms use different browsers.
What I do know is that as of HTML5 frames are deprecated, therefore not a very good practise. If not anything you are going to have more and more compatibility issues with new browsers in the future.
Why don't you do the request on the same page? If the downloader.php has the proper headers the download process should start without breaking or changing the current page at all.
Hence sorry to say but Android has no support for iframe though ios have it.