Fuse Community

Keyboard Covering TextView While typing

The keyboard covers the TextView when typing long text. What function could prevent such or allow the content to stay top while typing long text.

Thanks

Hey.

You could use WhileKeyboardVisible and move content while typing.

Hope this helps.

I have tried that already. Got same result. I will paste the code here.

<Panel ux:Class="Tab" ClipToBounds="false" Margin="0" Width="100%">
	<string ux:Property="Text"/>
	<float ux:Property="FontSize"/>
	<Text Value="{ReadProperty Text}" FontSize="12" Color="#000" Alignment="Center"/>
</Panel>

<Panel>
    <WhileTrue Value="{bool}">
    	<AddingAnimation>
        	<Toggle Target="showToast"/>
        	<Change Toast.Opacity="0" Duration="2" DelayBack="2"/>
        	<Scale Factor="1" Duration="2" Easing="CubicInOut" />
        </AddingAnimation>
        <RemovingAnimation>
			<Change Toast.Opacity="1" Duration="5" DelayBack="5" />
		</RemovingAnimation>
    </WhileTrue>
    <Rectangle Opacity="0" ux:Name="Toast" Fill="#fff" Width="250" Height="75" CornerRadius="5" Alignment="TopCenter" Margin="-250,10">
        <StackPanel Alignment="Center">
            <Text Font="FontAwesome"  Alignment="Left">&#xf06a;</Text>
            <Text FontSize="20" Value="{toastTitle}"/>
            <Text Value="{toastText}"/>
        </StackPanel>
        <Clicked>
            <Toggle Target="showToast"/>
            <Set Toast.Opacity="0"/>
        </Clicked>
        <DropShadow Distance="4" Size="1" Spread=".2"/>
    </Rectangle>
    <WhileTrue ux:Name="showToast">
        <Change Toast.Margin="0" Duration=".2" DurationBack=".2"/>
    </WhileTrue>
</Panel>

<DockPanel ux:Class="ClientPanel">
	<TopFrameBackground Dock="Top"/>
</DockPanel>

<Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="2" Color="#0b1248">
	<LayoutAnimation>
		<Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
	</LayoutAnimation>
</Rectangle>

<EdgeNavigator>
	<Panel ux:Name="sidebar" Edge="Left" Width="60%" Margin="0,10,56,0" Background="#0b1248">
		<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000"/>
		<ActivatingAnimation>
			<Change shadow.Color="#0004"/>
			<Change sidebarFade.Opacity="1"/>
		</ActivatingAnimation>

		<Grid RowCount="2">
			<StackPanel ItemSpacing="10">
				<StackPanel Margin="15,70,0,0">
					<algc.Text Margin="0,0,0,15" FontSize="12">MENU</algc.Text>	
					

					<ScrollView>
						<StackPanel>
							<Each Items="{Links}">
								<Separator/>
								<Panel HitTestMode="LocalBoundsAndChildren" Clicked="{gotoPage}" >
									<algc.Text  FontSize="14" Value="{name}" Margin="15"></algc.Text>

									<WhilePressed>
										<Scale Factor=".95" Duration=".08" Easing="QuadraticOut"/>
									</WhilePressed>
								</Panel>
							</Each>
						</StackPanel>
					</ScrollView>
				</StackPanel>
			</StackPanel>
		</Grid>
	</Panel>

	<DockPanel Color="White">
		<Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None"/>

		<!-- Page Header -->
		<StackPanel Dock="Top" Color="#0b1248">
			<Shadow Size="5" Distance="3"/>
			<StatusBarBackground/>
			<Panel Height="40">
				<Text FontSize="20" Color="White" Font="FontAwesome" Margin="10,11,0,0" Alignment="Left">
					<Clicked>
						<NavigateToggle Target="sidebar"/>
					</Clicked>
					&#xf0c9;
				</Text>	
				<Panel Width="100%">
				<Image File="../Assets/abllogo4.png" Alignment="CenterLeft" Width="20%" Height="30" Margin="30,0,0,0"/>
				<Text Color="White" Width="80%" Alignment="CenterRight" Margin="30,0,30,0" FontSize="15">
					<Font File="../Assets/Quicksand-Bold.otf"/>Testimony</Text>
			</Panel>
			</Panel>
		</StackPanel>
		<!-- End -->

		<!-- Page Content -->
		<StackPanel>
			<DockPanel>
				<Panel Dock="Top" Height="100%" Width="100%" Margin="1" Background="#e4e4e4" Layer="Background">
					<Grid ColumnCount="2" Height="35" Background="#e4e4e4">
						<Panel ux:Name="page1Tab" HitTestMode="LocalBoundsAndChildren">
							<Tab Text="Create Testimony">
								<Clicked>
									<Set navigation.Active="page1"/>
								</Clicked>
							</Tab>
						</Panel>
						<Panel ux:Name="page2Tab"  HitTestMode="LocalBoundsAndChildren">
							<Tab Text="Register Testimony">
								<Clicked>
									<Set navigation.Active="page2"/>
								</Clicked>
							</Tab>
						</Panel>
					</Grid>
				</Panel>
				
			</DockPanel>
				<PageControl ux:Name="navigation">
						<Page ux:Name="page1">
							<WhileActive Threshold="0.5">
								<Set indicator.LayoutMaster="page1Tab"/>
							</WhileActive>
							<ScrollView ClipToBounds="true">
							<DockPanel>
							
							<StackPanel ItemSpacing="10" Padding="10">
								<DockPanel>
									<Text Dock="Top">Testimony</Text>
									<TextView ux:Name="content" Margin="0,0,0,0" TextColor="#0b1248" CaretColor="Black" Value="{testimony}" Padding="10" FontSize="15" TextWrapping="Wrap">
										<Rectangle Layer="Background" CornerRadius="2">
											<Stroke Color="#0b1248"/>
										</Rectangle>
									</TextView>

								</DockPanel>
								<DockPanel>
									<Text Dock="Top">Name</Text>
									<TextInput ux:Name="username" FontSize="20" PlaceholderText="Enter your name" Value="{userName}" PlaceholderColor="#ccc" Padding="10">
										<Rectangle Layer="Background" CornerRadius="2">
											<Stroke Color="#0b1248"/>
										</Rectangle>
									</TextInput>
								</DockPanel>
								<DockPanel>
									<Text Dock="Top">District</Text>
									<TextInput ux:Name="district" FontSize="18" PlaceholderText="District 00" Value="{districtNo}" PlaceholderColor="#ccc" Padding="10">
										<Rectangle Layer="Background" CornerRadius="2">
											<Stroke Color="#0b1248"/>
										</Rectangle>
									</TextInput>
								</DockPanel>

							</StackPanel>
						<Grid ColumnCount="2" Dock="Bottom">
							<algc.Button Color="#090442" Text="Send" Clicked="{CreateTestimony}"/>
							<algc.Button Color="#090442"  Text="Cancel" Clicked="{Cancel}"/>
						</Grid>
						<Panel ux:Name="Notification" Opacity="0">
							<Text TextColor="Red" Value="{validationError}"/>
						</Panel>
						<BottomFrameBackground IncludesKeyboard="false" Dock="Bottom"/>
						<BottomBarBackground IncludesKeyboard="false"/>			
				    </DockPanel>
				</ScrollView>
				</Page>
				<Page ux:Name="page2">
					<WhileActive Threshold="0.5">
						<Set indicator.LayoutMaster="page2Tab"/>
					</WhileActive>
				</Page>
			</PageControl>
		</StackPanel>

		<!-- End -->
			
	</DockPanel>
</EdgeNavigator>

Please check BottomBarBackground - specifically, you’re interested in IncludesKeyboard property.
You’ll need to first understand how layout works in Fuse, so take some time to read this article - specifically, the part about DockPanel.

Also, if you’re willing to fully support iPhone X, you’ll want to get acquainted with Safe Layout.