Nativescript - cannot edit an input field at the bottom of page (iOS) - nativescript

Have a page with lots of input fields laid out vertically inside a scrollview - some at the bottom.
The problem is when I tap on an input field at the bottom - the keyboard pops up and hides the field - it doesn't auto scroll up to make the field visible.
This is on iOS.
Any help?
Doesn't happen in Android - it automatically makes the input field visible by moving it above the keyboard.

On iOS, you can use nativescript-iqkeyboardmanager plugin which resolves this case and makes the content "pushable".
Sample demo demonstrating the usage of the plugin can be found here.

Related

NativeScript last element in scrollview partially hidden by Bottom Navigation

I am using tabbed navigation for my nativescript app. I have a playground sample here https://play.nativescript.org/?template=play-ng&id=WKlZDF&v=6
On the second tab, I have a list of tasks that is longer than most screens can display so it is wrapped in a <ScrollView>. The scrolling works as expected except when you get to the bottom. The final element is partially hidden by the <BottomNavigation>. If you drag up on the screen you can see the rest of the element but the second you release the screen it slides back down behind the <BottomNavigation>.
You can see what I am talking about in the playground or in the screenshot below. Does anyone know how to correct this? I thought about just adding a bunch of padding at the bottom but that seems super hackey.

Xamarin.iOS dynamically ScrollView

I really need your help.
I'm new at developing Xamarin.iOS apps and now I'm totally stuck.
I cannot get the hang of how to implement a dynamic ScrollView in iOS, it was fairly easy to implement on Android.
So what I'm trying to implement is a view that contains mostly text (that will be quite long, hence the scrolling, but also two buttons.
Here is a gif in Android showing what I'm trying to achieve
The view is like this:
Header
Long text
Copyright button
-- Copyright text
Terms of usage button
-- Terms of usage text
I have struggled with the scrolling so long and I really need your help.
All of the text properties are getting bound to the view by binding with MvvmCross so the view can't be with hard-coded heights and widths, it needs to adjust properly.
Can somebody please show me with a sample project how to implement it?
The view needs to be in a .xib view (because of MvvmCross) and it cannot contain a UIViewcontroller.
So the solution needs to be in a simple UIView
I'm working on a Windows, with Visual Studio 2015 enterprise, and I cannot use a Mac (and Xcode) other than to compile my code with.
What I've tried is a solution like this:
UIView called "MyRootview"
-- UIScrollView called "MyScrollView"
-- -- UIView called "MyContentView"
Can you please help me?
Method 1:
Use a TableView instead of ScrollView. Make the header row 1, long text row 2, button 1 and it's text row 3 and button 4 and it's text row 4.
Give row height for the last 2 rows so that you only see the button and on button click increase the row height and reload the table section.
Method 2:
If you keep wanna using ScrollView, put the button data in a label and give it a height of 0 (and number of lines 1) to hide it and on button click remove the height constraint and set the number of lines to 0 (max).
I used FluentLayout instead. Very easy.
https://github.com/FluentLayout/Cirrious.FluentLayout

Labels in XCode View, positioned differently in Simulator?

In XCode 7, on a Swift 2 project, when I place a label onto the View, why is the label centred in XCode, but in the Simulator it's show off to the right?
This is just playing at the moment, where I don't want to play with constraints just yet (which I believe will be used later).
I had the same problem when working through a demo, and this worked for me. Try using the 4.7 inch size view controller:
Look in the middle left hand menu (the Document Outline), if not shown it’s under Editor > Hide Document Outline (a misnomer, clicking it will Show or Hide it).
Click on the View Controller so it's highlighted.
Click on the 4th tab of the right hand one (Utilities: the Attributes Inspector). If not shown it’s under View > Utilities > Show Attributes Inspector.
Under Simulated Metrics is a Size option to change from “Inferred” to “iPhone 4.7-inch”.
You'll need to realign things again, but now these should look central in the View and in the Simulator.
Constraints, when you want to get to them, will probably be more helpful in this regard.

Detail View on Storyboard too zoomed in - creates misaligned objects in simulator

I have perhaps a beginner's question but have not found any solutions addressing this specific problem after searching endlessly on stackoverflow and other forums.
My detail view in the storyboard appears to be too zoomed in. At this point, zooming in and out simply zooms in and out on the storyboard, but not the detail view specifically.
Indicators of this are that the alignment arrow to the left of my button is not positioned at half-latitude of the Detail View box, although when I align my button to this marker I do see a crosshair indicating that my button is "centered".
Detail View - Further Out
Upon simulation, it is apparent that using these crosshairs produces a run-time alignment far right and up from being centered. Where my button is currently placed seems to be in the center of the simulator screen but would like my guidelines to allow the button to be centered using the guidelines suggested.
Simulator View
A) How do I "zoom out" within the Detail View so I can see the entire screen in the detail view?
B) How can I center my object if the guidelines are inherently off-center?
Thank you so much for you advice and input.
Are you using constraints to keep the various controls in place etc...?
If not try:
Select all elements in the UI of the detail view. Click on an empty spot somewhere in the View and press CMD + A.
Click on resolve auto layout issues at the bottom right of the Nib editor. (it's the right most icon)
Click on Clear Constraints
Click on resolve auto layout issues again, then Reset to Suggested Constraints
From here, tweak your constraints as per the UI you're working with i.e. iPhone, iPad and whatever orientation it's in etc...
I forgot to mention how I fixed the "too zoomed-in" problem.
In the storyboard controller, on the left navigator panel, within the file inspector, I simply unchecked "Use Size Classes" within the Interface Builder Document section. My view controller changed into a normal iPhone shape and everything finally fit into place.

How can I get a two-row toolbar like in Mail.app and Xcode?

I'm trying to add a "second row" after my NSToolbar in my app, that remains part of the title bar. As an example, Mail has a thin gray divider line below the NSToolbar with some extras items below that. Very specifically, when the window is put into fullscreen mode, that second "row" stays attached to the title bar as it slides down under the system menu bar. Xcode has a similar story.
I tried setting my NSWindow to textured and placing my second row controls directly in the content view of the window. While this mostly looks correct in windowed mode, those controls of course won't appear attached to the toolbar when it slides down in fullscreen mode. So how can I achieve the same behavior that Mail and Xcode do? I've looked at a lot of toolbar customization code but none of them really cover this specific case.
fullScreenAccessoryView is deprecated in macOS 10.10
In order to do this in recent versions of macOS, use the addTitlebarAccessoryViewController method on your NSWindow and pass in a subclass of NSTitlebarAccessoryViewController.
For example:
NSTitlebarAccessoryViewController *accessoryViewController = [[NSStoryboard storyboardWithName:#"Main" bundle:nil] instantiateControllerWithIdentifier:#"AccessoryViewController"];
[self.mainWindowController.window addTitlebarAccessoryViewController:accessoryViewController];
What I needed to do was call [NSToolbar setFullScreenAccessoryView:] on the view below my toolbar. This results in the behavior I was aiming for. See the NSToolbar documentation for this method.
First one is normal toolbar. For second toolbar you can create a separate view of your desired height and add it in the main landing-window.

Resources