CODEWITHSUNDEEP
xamarin.formsxamarin.ioseditorscrollview
the_tr00per
the_tr00per

Reputation: 439

Xamarin Forms ScrollView issue with Editor when using the software Keyboard

I'm using Xamarin Forms with iOS. I have an Editor within a scrollview. The editor is set to the fill most of the page. This is working.

<ContentPage.Content>
    <ScrollView>
    <StackLayout>
        <Editor x:Name="NotesEditor" Text="{Binding Contact.AttendanceDetails.Notes, Mode=TwoWay}"  VerticalOptions="FillAndExpand" 
            HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue" TextChanged="NotesEditor_TextChanged"  ></Editor>
        <Label x:Name="RemainingText" VerticalOptions="Fill" HorizontalOptions="CenterAndExpand" HeightRequest="40"></Label>
    </StackLayout>
    </ScrollView>
</ContentPage.Content>

The issue is when the software keyboard is used, the page scrolls and when the user starts typing, they do not initially see the text they are typing on the keyboard without manual scrolling.

Is there a way the software keyboard doesn't push the scrollview? So the user can do it manually maybe?

Any thoughts would be appreciated.

Upvotes: 2

Views: 3774

Answers (4)

Vijay
Vijay

Reputation: 1

If you want an editor in a scrollview, you can try this solution.

<ContentPage>
 <ScrollView >
                  <Grid VerticalOptions="FillAndExpand">
                              <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                               </Grid.RowDefinitions>
                     
                   <Editor VerticalOptions="FillAndExpand"
                                                       AutoSize="TextChanges"
                              -----
                              Grid.Row="0" />
                     </Grid>
  </ScrollView>
</ContentPage>

for eg: your code should be like this

<ContentPage.Content>
    <ScrollView>
   <Grid VerticalOptions="FillAndExpand">
                              <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                 <RowDefinition Height="Auto" />
                               </Grid.RowDefinitions>
        <Editor x:Name="NotesEditor" Text="{Binding Contact.AttendanceDetails.Notes, Mode=TwoWay}"  VerticalOptions="FillAndExpand" 
            HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue" TextChanged="NotesEditor_TextChanged" Grid.Row="0" ></Editor>
        <Label x:Name="RemainingText" VerticalOptions="Fill" HorizontalOptions="CenterAndExpand" HeightRequest="40" Grid.Row="1"></Label>
    </Grid>
    </ScrollView>
</ContentPage.Content>

Note: You can Set hightRequest for the Scroll view if required.

Upvotes: 0

the_tr00per
the_tr00per

Reputation: 439

Managed a fix by adding an event to the Editor Focused event:

XAML:

<ScrollView x:Name="scrollview">
    <StackLayout>
        <Editor x:Name="NotesEditor" Text="{Binding Contact.Notes, Mode=TwoWay}"  VerticalOptions="FillAndExpand" 
            HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue" TextChanged="NotesEditor_TextChanged" Focused="NotesEditor_Focused"   ></Editor>
        <Label x:Name="RemainingText" VerticalOptions="Fill" HorizontalOptions="CenterAndExpand" HeightRequest="40"></Label>
    </StackLayout>
    </ScrollView>

Code behind:

private void NotesEditor_Focused(object sender, FocusEventArgs e)
    {
        scrollview.ScrollToAsync(0, 0,true);
    }

Upvotes: 1

Ahmad ElMadi
Ahmad ElMadi

Reputation: 2617

Try this component it might work with no need for the scrollView . However it will fail if you enabled the expanding of the editor .

https://devlinduldulao.pro/how-to-fix-keyboard-overlapping-or-covering-entry/

Upvotes: 0

LeRoy
LeRoy

Reputation: 4436

I'm not sure of your use case but why not completely remove the ScrollView ? There's no reason to scroll if the editor is full screen, You can apply margin to the label if you still want to see it.

<ContentPage.Content>
    <StackLayout>
        <Editor x:Name="NotesEditor" Text="{Binding Contact.AttendanceDetails.Notes, Mode=TwoWay}"  VerticalOptions="FillAndExpand" 
            HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue" TextChanged="NotesEditor_TextChanged"  ></Editor>
        <Label x:Name="RemainingText" VerticalOptions="Fill" HorizontalOptions="CenterAndExpand" HeightRequest="40" margin="10, 30, 10, 30"></Label>
    </StackLayout>
</ContentPage.Content>

Upvotes: 0

Related Questions