Bug 21915 - iOS - Using a StackLayout with LayoutOptions.XxxExpand does not resize properly on keyboard open
Summary: iOS - Using a StackLayout with LayoutOptions.XxxExpand does not resize proper...
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.2.2
Hardware: Macintosh Mac OS
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2014-08-07 12:05 UTC by Geoff Armstrong
Modified: 2016-04-04 13:55 UTC (History)
5 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED FIXED

Description Geoff Armstrong 2014-08-07 12:05:32 UTC
If you have a StackLayout with LayoutOptions.FillAndExpand (or any Expand, really) at the top level then when the keyboard is shown, the items below the Expanded item get hidden. If you have an Expanded scrollview you notice that while the outer dimensions of the scrollview seem to change (just enough to fit on the screen, but the items below still get hidden), the inner dimensions of the scrollview stay the same.

To reproduce: make a new Xamarin Forms PCL solution and replace its GetMainPage() function with this:

public static Page GetMainPage()
{	
	return new ContentPage { 
		Content = new StackLayout {
			Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
			VerticalOptions = LayoutOptions.FillAndExpand,
			Children = {
				new Label {
					Text = "This label is just content before the expanded portion",
				},

				// For simplicity, demonstrating with a label
				//new Label {
				//	VerticalOptions = LayoutOptions.FillAndExpand,  // can be any XxxAndExpand
				//	Text = "This label does not get resized on keyboard open on iOS (Android is fine)",
				//},

				// You can use a scrollview instead of the label to see outer/inner dimensions
				new ScrollView {
					VerticalOptions = LayoutOptions.FillAndExpand,
					Content = new Label {
						Text = "This scrollview does not get resized on keyboard open on iOS (Android is fine)",
					},
				},

				new Entry {
					Text = "This gets hidden on keyboard open on iOS (Android is fine)",
				},
			},
		},
	};
}

Expected: When the keyboard appears, the StackLayout resizes so that the Expanded portion takes up less room
Actual: The StackLayout resizes so the Expanded portion takes up the rest of the screen, leaving anything after below the fold

As mentioned in the code, this issue only seems to happen on iOS. The Android handler seems fine. I don't have anything available to test whether it happens in Windows Phone etc.
Comment 1 Parmendra Kumar 2014-08-20 07:36:13 UTC
I have checked this issue and able to reproduce this, To reproduce this issue I have followed the given steps on bug description:

Screencast: http://screencast.com/t/5EVSGXop

IDE Log: https://gist.github.com/anonymous/9c9d404e807296fae65b

Environment info:

=== Xamarin Studio ===

Version 5.2.1 (build 1)
Installation UUID: 1a096c6f-0678-402e-89b2-a2c10f7e80e4
Runtime:
	Mono 3.6.0 ((no/f540f8a)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 306000039

=== Xamarin.Android ===

Version: 4.14.0 (Business Edition)
Android SDK: /Users/360_macmini/Desktop/android-sdk-macosx
	Supported Android versions:
		2.1   (API level 7)
		2.2   (API level 8)
		2.3   (API level 10)
		3.1   (API level 12)
		3.2   (API level 13)
		4.0   (API level 14)
		4.0.3 (API level 15)
		4.1   (API level 16)
		4.2   (API level 17)
		4.3   (API level 18)
		4.4   (API level 19)
Java SDK: /usr
java version "1.6.0_65"
Java(TM) SE Runtime Environment (build 1.6.0_65-b14-462-11M4609)
Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-462, mixed mode)

=== Apple Developer Tools ===

Xcode 5.1 (5084)
Build 5B130a

=== Xamarin.iOS ===

Version: 7.2.6.28 (Business Edition)
Hash: 606f31a
Branch: 
Build date: 2014-08-01 15:27:48-0400

=== Xamarin.Mac ===

Version: 1.10.0.4 (Business Edition)

=== Build Information ===

Release ID: 502010001
Git revision: d06832ce9807d6be24aca225457e8b37c7669f6f
Build date: 2014-08-07 12:10:47-04
Xamarin addins: 1de032531be4cecf2f39dbee3b87aac78204058c

=== Operating System ===

Mac OS X 10.9.4
Darwin ShrutiMac.local 13.3.0 Darwin Kernel Version 13.3.0
    Tue Jun  3 21:27:35 PDT 2014
    root:xnu-2422.110.17~1/RELEASE_X86_64 x86_64
Comment 2 Geoff Armstrong 2015-01-09 18:54:31 UTC
I've fixed this in my project with the help of a custom renderer. KeyboardResizingAwareContentPage is a simple subclass of ContentPage.

using Foundation;
using NW.Mobile.Controls;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(KeyboardResizingAwareContentPage), typeof(MyProject.iOS.Renderers.IosPageRenderer))]

namespace MyProject.iOS.Renderers {
	public class IosPageRenderer : PageRenderer {
		NSObject observerHideKeyboard;
		NSObject observerShowKeyboard;

		public override void ViewWillAppear(bool animated)
		{
			base.ViewWillAppear(animated);

			observerHideKeyboard = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillHideNotification, OnKeyboardNotification);
			observerShowKeyboard = NSNotificationCenter.DefaultCenter.AddObserver(UIKeyboard.WillShowNotification, OnKeyboardNotification);
		}

		public override void ViewWillDisappear(bool animated)
		{
			base.ViewWillDisappear(animated);

			NSNotificationCenter.DefaultCenter.RemoveObserver(observerHideKeyboard);
			NSNotificationCenter.DefaultCenter.RemoveObserver(observerShowKeyboard);
		}

		void OnKeyboardNotification(NSNotification notification)
		{
			if (!IsViewLoaded) return;

			var frameBegin = UIKeyboard.FrameBeginFromNotification(notification);
			var frameEnd = UIKeyboard.FrameEndFromNotification(notification);
			var bounds = Element.Bounds;
			var newBounds = new Rectangle(bounds.Left, bounds.Top, bounds.Width, bounds.Height - frameBegin.Top + frameEnd.Top);
			Element.Layout(newBounds);
		}
	}
}
Comment 3 Jason Smith [MSFT] 2015-02-05 04:07:09 UTC
On iOS we do not resize the children and instead set the InsetOffset of any scrollable region. Your solution works too if you prefer that approach.
Comment 4 Geoff Armstrong 2015-02-05 14:02:08 UTC
Jason, the problem with that approach comes up when you have a fixed UI element at the bottom of the screen and the remainder scrolls (such as when you have, say, a chat interface and your input method is fixed to the bottom of the screen).
Comment 5 Alex Rainman 2016-04-04 13:55:01 UTC
I am facing the same issue but in Android. No matter if i wrap the StackLayout/Grid with ScrollView, the entries at the bottom of the screen are overlapped by Keyboard in Android and ScrollView doesn't resize when keyboard shows.