Cordova navbar bigger in iOS 6 - ios

Working with Cordova and Ionic at the moment and trying to make an app as backwards compatible as possible (which is going surprisingly well) except I have stumbled upon one small issue.
The navbar after iOS 7 is bigger in that it covers the background of the status bar as well, as seen below.
So when I load the app on a phone running iOS 6 or earlier, the status bar doesn't get resized, the whole page just gets moved down, hiding some of the content in the footer.
Any help would be greatly appreciated. I'm probably missing something simple.

If I'm understanding correctly, then you need to add padding like this:
document.body.style.marginTop = "20px";
This should make the navbar view correctly.
See this - http://coenraets.org/blog/2013/09/phonegap-and-cordova-with-ios-7/

Related

Safari IOS Having clickable elements at top of screen doesn't work very good with landscape on Iphone

I have this app that has a bar at the top of the page that has a bunch of clickable elements it has always been a problem since on Safari IOS when clicking high up it brings down the address bar and exits fullscreen. We solved this initially by adding some padding up top to make the clickable area larger but they seem to have increased this size on IOS 13 and adding more padding will make it look horrible. Anyone had this problem and have a workaround for it?
Some way the click area for bringing down the address bar smaller or something?
The big problem is that we need our app to stay in fullscreen so the most optimal would be to be able o decrease the clickable area for the address bar to come down or to be able to block it in landscape mode is there really no way to go around this? for instance going into twitch.com on safari and iPhone and put it in landscape you are not able to press the search icon.
I have the same issue, I don't think is possible to fix this as it seems to be a safari issue, if you check not event apple.com site works as expected.
The workaround I did is detecting when the app gets out of fullscreen by comparing the screen.height with the screen.availHeight and move the top bar just below the address bar and there users can click, not optimal, but works for us. :)
Hope it helps
In your CSS code try to remove every value of "REM" "VW" "VH" use only pixels "PX". that should fix the issue 100%.

iOS 11: `UIBarButtonItem`s having placement and usage issues

We have an app that has been around since before the days of storyboards. Prior to iOS 11 everything was fine after we updated it to be 64 bit. We have found two issues when running under iOS 11:
On iPhones the single UIBarButtonItem in the navigation bar's RightBarButtonItems isn't being placed all the way to the right as usual (the left side buttons is in the proper position).
On iPads we have what looks much like a segmented control (but made of individual buttons). It works fine when it is not in any kind of bar, but when it is in a bar it doesn't get touches.
In both cases I have used the UI navigator in Xcode to see that iOS 11 has added a couple extra views between bars and buttons. One of the added views is a bar content view (specific class depends on wether it is a toolbar or navigation bar; _UIToolbarContentView or _UINavigationBarContentView). The other added view is consistent among all kinds of bars, _UIButtonBarStackView.
In issue 1 above the added stack view is adding a very wide zero height view after the right bar button that is pushing the button way to the left (like it is trying to fit on an iPhone 4's screen far). Since the class has an underscore in front of it and isn't listed in the docs it must be a private class so even if I did dig into it and figure out how to keep the extra padding from getting added to the end it would get rejected by Apple for using private API.
I can't be sure what of the new views is intercepting the touches for the second issue but given that they are the only real differences I see between iOS 10 & 11 they seem the most likely culprits.
As I mentioned this was built before storyboards so the UI is built in xib files.
Has anyone run into issues with these new views and found a way to solve them? Or should I just rip out the whole UI and rebuild it?

How to smoothly translate view in iMessage extension in iOS 10?

I have issue when I try to push view controller in willTransitionToPresentationStyle:. The view was blinking for a split second before it fully expanded. It might be a small glitch or bug since iOS 10 and Xcode 8 are still in beta. But when I manually requested to change presentation style to MSMessagesAppPresentationStyleExpanded by calling requestPresentationStyle: after I push view controller, it went to expand mode more smoothly. Does anyone have similar issue?
I have had similar problems with transitions in iMessage apps. I think this should improve considerably when iOS 10 and Xcode 8 come out of beta, but for now we have to deal with Xcode's bugs.
There's a few things I've done to make this look better. Inside my extension I have a method that checks the presentation style every time the view changes. This method manages two different UIs - one for MSMessagesAppPresentationStyleExpanded and one for MSMessagesAppPresentationStyleCompact. This method hides and shows specific views accordingly. In my compact UI I have a button that allows the user to expand the interface by clicking it (this is basically the same as clicking the up arrow at the bottom right of the screen).
I've noticed that if you let the user expand the messages app after the view has been loaded for a while the transitions are much smoother and less buggy. Not sure why this is the case, but you should give it a try. Also, I've found segues to be extremely buggy, so that's why I went with keeping everything on one view controller.

jquery mobile views overlap

I am working on a project which uses backbone.js, jqmnavigator, require.js, jquerymobile and phonegap.
For some reason the app works fine in simulator but when I put the same app on the device , the views overlap after few screen transitions.
Any ideas?
Looks like i found the reason for overlapping views.
One of the reason was , i was doing some intensive work in side "render" call. So i think it was causing the view to overlap.
When i moved it to , "'pageshow': 'this_pageshowHandler'" this_pageshowHandler(), the overlapping of the views went off.
Also, i followed some tips from :
http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

iOS NativeControls - showToolBarTitle() is not working (PhoneGap)

I just saw a post on the phonegap google group about the issue
iOS NativeControls - showToolBarTitle() is not working.
and have spent my last two days with searching a solution for this issue.
More specifically - I want to add a native iOS toolbar to my phonegap app with the following features:
Title at the middle (I prefer an image, but a simple String in white color is also fine).
Back button (at the left side).
Action button (at the right side).
Background color - I want to control the backgroud color of the toolbar (I want it to be green!)
Can you please help me in anyway to complete this tasks?
Do you have some partial working code like NativeControls toolbar?
P.S - I already implemented a tabbar with the NativeControls plugin.
Tnx!
Lior.
Recently I have rewritten nativecontrols plugin for cordova 3.0. I see this question is a little outdated, but probably someone would want to use this plugin. actionsheet and toolbar is working now, tabbar and navbar is WIP.
https://github.com/apla/me.apla.cordova.nativecontrols
BTW, in original repository toolbar is never works.

Resources