How to push layout up on keyboard open

How-to Discussions
1

I have a Page using <Grid> with some <TextInput> on it. The problem is that every time I tap an input, the keyboard “squeeze” the page vertically, and this behavior leads to my Grid children getting above each other.

How to prevent this kind of behavior?

Visual example of what is happening:

file
p9XWPEAYF2DL-image-1492992931636.jpg1440×1280

** View Code: **

<AppPanel ux:Class="IndexPage">
	<Router ux:Dependency="router" />

	<Grid RowCount="2">
		<StackPanel>
			<Image File="../Assets/logo.png" Width="100" Height="100" Margin="50" />
			
			<Text Color="#44679f" FontSize="26" TextAlignment="Center">E Meu FGTS?</Text>
			<Text Color="#44679f" FontSize="18" TextAlignment="Center" MaxWidth="300" Margin="10" TextWrapping="Wrap">Consulte a partir de qual data seu FGTS estará disponível.</Text>
		</StackPanel>

		<StackPanel>
			<Text Alignment="Center" FontSize="18" Color="#646464">Digite sua data de Nascimento:</Text>

			<Grid ColumnCount="3" Margin="20" Alignment="Center" IsFrozen="true">
				<AppTextInput PlaceholderText="DD" MaxLength="2" />
				<AppTextInput PlaceholderText="MM" MaxLength="2" />
				<AppTextInput PlaceholderText="AAAA" MaxLength="4" Width="60" />
			</Grid>

			<Text Color="#44679f" Opacity="0.5" Margin="0, -15, 0, 35" FontSize="15" Alignment="Center">Exemplo: 01/10/1980</Text>

			<AppButton Label="Consultar Data!" Clicked="{ gotoSuccess }"></AppButton>
		</StackPanel>
	</Grid>
</AppPanel>
2

Hi Claudio,

there will be a couple UX things you will find useful in this case.

First, there is WhileKeyboardVisible (https://www.fusetools.com/docs/fuse/triggers/whilekeyboardvisible) - you might want to hide something, like the logo, while the keyboard is up, just to save some space.

Second, there is BottomBarBackground that has a IncludesKeyboard boolean property (https://www.fusetools.com/docs/fuse/controls/bottombarbackground#section-table-of-contents). To use this, you will have to understand how DockPanel works. I suggest playing around with this example: https://github.com/fusetools/fuse-samples/tree/master/Samples/OSUI

Hope this helps!

3

For now I “fixed” the issue by removing the Grid and using StackPanel directly with some margin on its children. While not the most elegant approach, it works perfectly.

DockPanel and Grid seems like super powerful components, I will start studying them further by the example you sent me.

Thanks!