I'm developing an app that loads a form from another website into an iFrame. The iFrame is set to 100% width and height while displayed. That website has JQTouch.
When I touch an input field in iOS 7 on the iPhone, the keyboard pops up and covers the input fields. It doesn't scroll, resize, or even let me scroll down to see the input field. If I type and then close the keyboard, nothing happens.
I've tried everything I've come across. Adding/removing height=device-height in the meta viewport tag didn't do anything. The thing that came closest to a solution was adding the preference "KeyboardShrinksView = true" in config.xml. That made it scroll (but not enough), and permanently pushes the site up about 20px or so.
I've been working on this for the last couple days with no solution in sight. Is this a bug? Is it the way JQTouch is interacting with PhoneGap Build?
UPDATE: Still no fix, but to test I took the form's page out of the iframe and set it using window.location.href="www.mywebsite.com"; They keyboard works in that situation. This is not a valid solution for me (yet), but may provide info on why it's not working.
UPDATE 2: I'm restructuring the app to use window.location.href, rather than an iframe or html object. This creates some small issues, but these are better than the keyboard not working. If anyone has an answer, I'd still like to see it.
Major Edit: I just realized the InAppBrowser plugin does NOT fix the keyboard bug alone. I did some more research, and this topic helped. I had to add "height=device-height" to every meta viewport tag. "width=device-width" should fix any problems viewing the site in mobile Safari. The final result is this:
<meta name="viewport" content="initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
One of these also had a semicolon thrown in there, so be sure to check and double-check for syntax errors, as they may cause the problem.
If this doesn't work, there is another solution that you might try in place of or in addition to the meta viewport fix. It's several comments down in that topic I linked and involves some changes to the CSS. Changes to this didn't fix anything in my code, but it helped at least one person, so it's worth checking out if you still need a solution.
I tested this fix with iframe and object, and it didn't work--InAppBrowser is still necessary.
/Major Edit.
Here are some workarounds that worked for me:
Use the InAppBrowser plugin. This allows the app to interact with loadstart/loadstop/loaderror events in the loaded page within the InAppBrowser. This is the solution I suggest. However, with iOS 7, you will need to hide the status bar manually, the solution for which is here
OR Load the page using window.location.href = [website url]. If you don't need to worry about interacting with or returning to the app or linking to external sites (both of which I needed), this is the way to go. It's pretty simple, but lacks some of the functionality of the first solution.
OR Get rid of JQTouch. I wasn't able to do this, but much of it is redundant when you're building an app with PhoneGap.
Related
I am new for Onsen UI. I want to control individual page orientation like one page work only in portrait mode, one another for landscape mode and one for both. Is this possible with Onsen UI.
If you want to have a one page being displayed in one orientation and another one in the other then it is possible even though I wouldn't recommend it. Usually using media queries to change the styles of the page itself is the preferred method. However if you must do it then you can do:
<ons-if orientation="landscape">
<ons-page>Landscape page</ons-page>
</ons-if>
<ons-if orientation="portrait">
<ons-page>Portrait page</ons-page>
</ons-if>
Here are the docs for ons-if.
If you're using Onsen 1 then you can use ons-if-orientation
Update:
The above code does work, but I guess it's not what you want. It seems like what you want is not to display a page if the orientation matches, but rather to force the orientation based on the page if I understand correctly.
If you want to force a specific orientation then I'm sorry to say that Onsen does not provide that functionality currently. link
Cordova provides some features like this
<preference name="orientation" value="portrait" /> in the config.xml but I think that's for the whole app, not only for a specific page.
It seems that there is a plugin which is supposed to be able to do it on a per-page basis. There are standards about this still in development if I'm not mistaken, but maybe they're not implemented everywhere.
I guess there is something like
<link rel="manifest" href="manifest.json"> which you could put in your HTML, where the json contains {"orientation": "landscape"}, but again I'm not sure that this will work everywhere. Maybe it will work only in Android.
One last thing you could do is something like
#media only screen and (orientation:portrait){
body { transform: rotate(90deg) }
}
however doing a rotation like that is going to probably create more issues and is not recommended.
Probably the manifest.json could be a solution for android or just the cordova plugin otherwise.
I searched alot about this topic but couldnt find any answer. I am ionic to build a android app. I used roundslider component from www.roundsliderui.com. Though whole roundslider fully works but the text input right in middle of roundslider does not work in ionic. I figured out that ionic.bundles.js script in ionic app is causing problem. If I remove this script, roundslider works fine.
Any advice why this script causing problem?
Thanks
I had the same issue. You have to disable the tap functionality.
http://ionicframework.com/docs/api/page/tap/
"In some cases, third-party libraries may also be working with touch events which can interfere with the tap system. For example, mapping libraries like Google or Leaflet Maps often implement a touch detection system which conflicts with Ionic’s tap system."
<div data-tap-disabled="true">
//Your Round Slider here...
</div>
I hope it helps.
there is a conflict between files of roundsliderui and ionic
read this article thats will help you
The problem is that the modal is not fully loaded at the time the circular-slider is rendered. This article states correctly that the offsetPosition is null if the document (in this case, the modal) is not finished loading
I'd like to create a twitter like stream out of a sap.m.list, hence when I get more data with a pulltorefresh control, I'd like to update the list with the additional rows, but should not move the list at all, and be hidden until the user scrolls the list down.
Any standard ways of doing this, or alternatively, custom CSS/JS recommended ways of doing this?
Thanks,
Matt
There's no need to drop down to jQuery here as OpenUI5 already contains the awesome iScroll library.
I've just setup a test app for you to have a look at here: https://github.com/js1972/ui5_pull_to_refresh.
Clone this; check the readme; then just run grunt serve to open the app in your default browser. You can use Chrome dev tools to emulate an iphone or android, etc.
I think this does what you're after - it works just like the GMail mobile app. You pull down to refresh items and at the end of the refresh your still looking at the same items but can now scroll up to see the new ones.
Will be interesting to see the performance if you have a thousand items... iScroll gives you allot of settings to play that may help (which aren't discussed in the UI5 SDK).
One thing to be careful of with browser scrolling is paint times. If the browser is not 100% done painting then iScroll can't calculate all the element dimensions it needs and you get strange results - typically just no scrolling. Sometimes you've just got to give a little time back to the browser by wrapping things in setTimeout(scroll_stuff, 0).
Hope this helps...
While not quite the answer I was after, looked into doing it another way, and provided you can work with automatically generated Id's that you'll need to calculate based on the row number, the following is one brute force way of doing it (I've borrowed it from another SO question and kept the animation for fun - Referenced SO Link):
var pOffset = $("#__item0-App--Main--MyList-76").position().top;
$("#App--Main--myPage-cont").animate({scrollTop: ( pOffset)}, 800);
I'm having some strange issues on <li> elements when viewing my webpage on an iphone.
There appears to be a mysterious padding added to the left of ALL <li> elements on the page (almost like a padding-left:30px) when viewing the webpage over 3G/Edge/GPRS. However, when viewing the page over wifi, the padding disappears, and the page renders as expected.
I use Eric Meyers reset.css stylesheet to reset my styles. This issue has happened to me on previous sites I've built so I know it's not localised just to this particular site. Perhaps O2 (my network provider) are modifying the css before sending it over to my iphone?
If you want to try and replicate this for yourself, my site is at http://www.pyre7.com
Any insight would be appreciated.
I've just found this article. It appears o2's proxy cache is in fact modifying content.
http://startupcafe.co.uk/2010/07/23/o2-compression-on-mobile-devices/
It could have something to do with slow speed of 3G and how you render CSS
I've got a UIWebView embedded in my iPhone app, and I'd like to keep a locked header and footer DIV on the page at all times, with a scrollable center DIV.
I know that I could do this using a header/footer that are UIView controls, but I want the header and footer to be HTML divs, as a pure HTML/JS/CSS solution will be easier to port to Android/PalmPre/AdobeAir, which is going to be on my todo list relatively soon.
I can do this using techniques like the one mentioned here:
http://defunc.com/blog/?p=94
But this requires that the user use 2 fingers to scroll the div, which is not satisfactory to me...
Any suggestions on how to do this?
Thanks,
Brad
I found someone that implemented a reusable solution for this, with a header and a footer:
http://cubiq.org/iscroll-4
I'm not too familiar with the UIWebView, so this may be a totally silly suggestion. But is there anything stopping you from having three UIWebViews on the page? One for the header, one for the body, and one for the footer. Because breaking it up sounds like the right idea.
Is this what you're looking for? Open this link on your iPhone device or simulator.
The index.html file has three div elements for "header", "container" and "footer" directly under the body, while all the work is done in the fixed.js file. The document is fixed in place by canceling the normal action for the "touchmove" event:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Then, a lot of work goes into creating event listeners for the "touchstart", "touchmove" and "touchend" events which are attached to the "content" div under "container". The logic boils down to simply moving the "content" div up and down.
This solution is 100% HTML/CSS/JavaScript, however there is some WebKit proprietary CSS and JavaScript which may limit portability. It may take a bit of tweaking to work on another mobile device but this would be a good proof-of-concept to start from.
I did not create this awesome sample project, I'm merely bringing it to the community's attention. For more information and a link to the zipped project, read Richard "Doctyper" Herrara's entire post on Fixed positioning in Mobile Safari.
May be clunky, but you could reposition the header and footer over top of the div as the user scrolls. This way your main div doesn't need to be scrollable. No help for anything (still) using frames though.
This is one of the more irritating browser issues with the iPhone/touch, I wish you could just focus on part of the page like a normal browser.
For a CSS only reference the Safari CSS Reference probably has what you are looking for. You'll be especially interested in anything starting with "-webkit" or "-khtml" as those are extended properties only available with WebKit like 3D and touches. Should apply to Android as well.
With JavaScript the Introduction to WebKit DOM Programming Topics and WebKit DOM API Reference are go-to guides. Definately take a look at the light-table demo for some copy and paste javascript on handling your touches as that's how I would solve this.
I have implemented iScroll on iphone and it is really smooth and fast and you can do whatever you want. Disadvantages are that android (1.6) refuses to scroll how I wanted and sometimes block other javascript if there are any.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">
Add those to your html code may solve your problem.