Keyboard over layout also while using bottomFrameBackground

How-to Discussions
1

Hi,
I have application , when i designed the registeration form i found problem that is " the keyboard is over my layout and there is a white space at top when keyboard visible "

This is my code , i search more and found the solution is use BottomFrameBackground but its not solve my problem :slight_smile:

<Page ux:Class="Register" Navigator.Reuse="None">
	<Router ux:Dependency="router" />

	<JavaScript>
	function formEnd() {
		console.log("Form Ended");
	}
	
	function GoBack() {
		router.goBack();
	}


	module.exports = {
		formEnd: formEnd,
		GoBack: GoBack
	};
	</JavaScript>
	<DockPanel>
		<!-- TOOLBAR START-->
		<ClientPanel Dock="Top">
			<StackPanel  >

				<Panel Height="56" Color="primaryDark" Padding="16, 0">
					<Panel>
						<!-- BACK ICON -->
						<Image File="../assets/Icons/back.png" Width="25" Alignment="Left" Clicked="{GoBack}"/>
					</Panel>

					<HRText Value="إنشاء حساب" Alignment="Center" FontSize="16" Margin="56,0" TextColor="#fff" />

				</Panel>

				<!-- Flat or Raised?-->
				<DropShadow />

			</StackPanel>
		</ClientPanel>
		<!-- TOOLBAR END -->
		<Panel>
			<!-- this fills the remaining available space -->
			<DockPanel Width="100%" Height="100%" Margin="0,20,0,0">
				<StackPanel Width="100%" Dock="Top" ItemSpacing="10">
					<Circle Height="110">
						<Stroke Width="2" Color="#950000" />
						<ImageFill StretchMode="Uniform" File="../assets/images/user_avatar.jpeg" />
					</Circle>
					<Button Width="50%" >
						<Rectangle CornerRadius="10" Color="buttonBackground" Alignment="Center" Width="80%" Padding="7" ux:Name="Rect">
							<Stroke Width="2" Color="buttonBackground" />
							<HRText TextAlignment="Center" TextColor="colorWhite" Alignment="Center" ux:Name="RectText" FontSize="16">رفع صورة</HRText>
							<WhilePressed>
								<Change Rect.Fill="#fff" Duration=".1"/>
								<Change RectText.TextColor="#1e1e1e" Duration=".1"/>
							</WhilePressed>
						</Rectangle>
					</Button>
				</StackPanel>
				<StackPanel Margin="16" Orientation="Vertical"  ItemSpacing="10" Dock="Fill">
					<Rectangle Color="colorWhite" Width="100%" MinHeight="40" Padding="12" CornerRadius="10" StrokeWidth="1" StrokeColor="#bfbfbf">
						<HRInputText Width="100%" PlaceholderColor="textGray"   PlaceholderText="الاسم واللقب" TextColor="darkBlack" TextAlignment="Right" Value="" ActionStyle="Next"/>
					</Rectangle>

					<Rectangle Color="colorWhite" StrokeWidth="1" StrokeColor="#bfbfbf" CornerRadius="10">
						<Grid Columns="3*,1*">
							<Rectangle Color="colorWhite" Width="100%" MinHeight="45" Padding="12" CornerRadius="10,0,0,10">
								<HRInputText Width="100%" PlaceholderColor="textGray"   PlaceholderText="رقم الهاتف" TextColor="darkBlack" TextAlignment="Right" Value="" InputHint="Number"/>
							</Rectangle>
							<Rectangle Color="primaryLite" CornerRadius="0,10,10,0" >
								<HRText Value="966+" Alignment="Center" FontSize="22" TextColor="colorWhite" />
							</Rectangle>

						</Grid>
					</Rectangle>
					<Rectangle Color="colorWhite" Width="100%" MinHeight="40" Padding="12" CornerRadius="10" StrokeWidth="1" StrokeColor="#bfbfbf">
						<HRInputText Width="100%" PlaceholderColor="textGray"   PlaceholderText="المدينة" TextColor="darkBlack" TextAlignment="Right" Value="" ActionStyle="Next"/>
					</Rectangle>


					<Rectangle Color="colorWhite" Width="100%" MinHeight="40" Padding="12" CornerRadius="10" StrokeWidth="1" StrokeColor="#bfbfbf">
						<HRInputText  Width="100%" PlaceholderColor="textGray"   PlaceholderText="كلمة المرور" TextColor="darkBlack" TextAlignment="Right" Value="" ActionTriggered="{formEnd}"  ActionStyle="Done" IsPassword="true"/>
					</Rectangle>	

					<Button Width="100%" Margin="0,10,0,5" >
						<Rectangle CornerRadius="10" Color="buttonBackground" Alignment="Center" Width="100%" Padding="13" ux:Name="Rect2">
							<Stroke Width="2" Color="buttonBackground" />
							<HRText TextAlignment="Center" TextColor="colorWhite" Alignment="Center" ux:Name="RectText2" FontSize="20">إنشاء حساب</HRText>
							<WhilePressed>
								<Change Rect2.Fill="#fff" Duration=".1"/>
								<Change RectText2.TextColor="#1e1e1e" Duration=".1"/>
							</WhilePressed>
						</Rectangle>
					</Button>
					<BottomFrameBackground />	
				</StackPanel>
			</DockPanel>
		</Panel>
	</DockPanel>

</Page>
2

I solve the problem, by replace the clientPanel with Dock Panel and dock the TopBackgroundFrame to the top of the DockPanel :slight_smile: