[Xamarin.IOS] [Xamarin.Forms] Soft Keyboard hides Entry at bottom of page.

Ankur · October 2015

[Xamarin.Forms] [Xamarin.IOS] I have a chat page which has a listview of messages and a horizontal stack at bottom (which contains an entry for new message and a send button). My problem is that in iOS, on tapping the entry, the Keyboard appears and hides the entry. I want it to scroll the page up such that the entry and the send button still remain visible. I have tried searching in Xamarin forums but couldn't find any proper solution. Everything works fine in Android.

XiaoFan · December 2015

Same issue with you. Any solutions?

Charlin · December 2015

You can put all your content inside a ScrollView, then the page will scroll up

Neelam · January 2016

How to do it without ScrollView?
Because I already have a scrollview for grid and if I use scrollview for this. Grid scrollview doesn't work.

Also if I use Entry's property-Keyboard it works fine for android but for iOS this issue comes.
Thanks in advance

GarethWynn · January 2016

Did you find a solution to this? I think I'm having exactly the same problem.

JulienRosen · January 2016

I have the opposite issue. I have the following content in a ContentPage

  <ScrollView >
    <Editor Text="{Binding Detail}" x:Name="LongStringEditor" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" />
  </ScrollView>

Say you only have one line of text in the editor. When you tap the control, the keyboard pops up, and pans your text off screen. How can I prevent this from occurring?

The scrollview is there because if the Editor is disabled (AKA readonly), you are unable to scroll the editor should the text be bigger then your screen.

GarethWynn · January 2016

Julien, this is why I can't use the scrollview in my solution. I have some text at the top of the page that needs to stay visible, even when the keyboard appears so I can't wrap my view in a scrollview because it causes the view to move up and the text at the top is no longer visible.

GarethWynn · January 2016

Julien you could possibly fix your problem by resizing the view when the keyboard appears as I have done. You'll need some platform specific code to handle the keyboard appearing, get the size of the keyboard and then resize the view. This is what I've done and it works well apart from the scroll position being reset when the view is resized.

void · February 2016

I dont think XF - strangely enough- can handle that out of the box. Try something like: // http://stackoverflow.com/questions/31172518/how-do-i-keep-the-keyboard-from-covering-my-ui-instead-of-resizing-it

Ankur · February 2016

I am going to try the code here: https://developer.xamarin.com/samples/monotouch/Chat/

MichaelRumpler · February 2016

I use the KeyboardOverlap plugin. Just install the NuGet package, call

KeyboardOverlap.Forms.Plugin.iOSUnified.KeyboardOverlapRenderer.Init();

from your AppDelegate and you're done.

Ankur · February 2016

This plugin also doesn't work for a chat scenario:

A list view of messages.
A horizontal Stack containing an Entry for text and a Send button to send the message.

The Chat sample mentioned above works with a little change.

Momm · February 2016

I had to implement something like this for a Contact screen with attachments at the bottom, but I can't share my code with you.

All I can say is that you should take a look at @void link, it's in the right path. You will need to create a CustomRenderer for this Page (PageRenderer) for iOS and inherit your screen from this PageRenderer. It is a mix of NSNotificationCenter and changing the layout bounds.

Jay-Mayu · November 2016

@MichaelRumpler said:
I use the KeyboardOverlap plugin. Just install the NuGet package, call

KeyboardOverlap.Forms.Plugin.iOSUnified.KeyboardOverlapRenderer.Init();

from your AppDelegate and you're done.

Wow wonderful plugin. Thanks for saving hours and hours of my time.

ThomasBurkhart · November 2016

@MichaelRumpler So no need to embedd the page in a Scrollview anymore?

MichaelRumpler · November 2016

@ThomasBurkhart

I don't think that I have any page without a big TableView/ListView. So I didn't have to add anything. Just add this one line and the plugin does the scrolling for you.

The plugin listens to a show keyboard event and moves the bottom end of the element with the focus to the top of the keyboard. Unfortunately that is a problem if that element is a multiline Editor which is higher than the remaining height and you tapped somewhere at the top. The plugin does not check the cursor position within the Editor and thus it could scroll the cursor out of the screen.
I opened an issue for this, but it doesn't look like @PaulPatarinski will fix it - and it was not important enough for me to fix it either (yet).

ThomasBurkhart · November 2016

@MichaelRumpler Thanks. Actually putting my view inside a ScrollView did also work for me so far.
Its doesn't look like that @PaulPatarinski maintains his plugins anymore

DevaPalanisamy · December 2016

@MichaelRumpler said:
I use the KeyboardOverlap plugin. Just install the NuGet package, call

KeyboardOverlap.Forms.Plugin.iOSUnified.KeyboardOverlapRenderer.Init();

from your AppDelegate and you're done.

It works. Thanks @MichaelRumpler.

PhilippSumi · January 2017

I think the solution would be to just be able to programmatically disable scrolling on a ScrollView. Like that, we could have someting like this:

OuterScrollView
    InnerScrollView
        MessageList
    InputControl

The scrolling on the outer scrollview would be disabled UNLESS the InputControl has focus and thus the keyboard is visible. I think that would solve all nested ScrollView scenarios - because in all of them, you always want one particular view to scroll. Question is whether that can be easily done or not (my feeling would be YES if done in the actual control - it's just not listening to the swipe gestures I assume).

DamienTouchette · March 2017

If anyone is still stuck with this and doing a chat layout. If you set the height of your list view you can wrap you page into a scrollview to get the desired effect.

<ScrollView>
        <StackLayout >

            <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
                <ListView 
                <--  Set this height for desired effect, or use a grid for better scalling -->
                    HeightRequest="300">
                </ListView>
            </StackLayout>
            <Grid x:Name="MessageControls" RowSpacing="1" ColumnSpacing="2" Padding="5"
                  BackgroundColor="#EFEFF4"
                  HorizontalOptions="FillAndExpand"
        >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
                <Editor

                />
                <Button 

                />
                </Grid>
        </StackLayout>

        </ScrollView>

MichaelMcKinney · May 2017

If anyone is still stuck with this, I found a solution that worked for my chat feature. See my answer here

assegd · November 2018

@MichaelRumpler said:
I use the KeyboardOverlap plugin. Just install the NuGet package, call

KeyboardOverlap.Forms.Plugin.iOSUnified.KeyboardOverlapRenderer.Init();

from your AppDelegate and you're done.

I am trying to implement your suggested code, but i cant access the Init() method. It gives me always this error:

Please let me know if you have any recommendation or suitable solution

MichaelRumpler · November 2018

@assegd said:
I am trying to implement your suggested code, but i cant access the Init() method.

It's still the same. Apparently the package is not found yet. Do a Nuget restore and build your project. It should work.

assegd · November 2018

@MichaelRumpler

it is not a package problem because the installation was ok plus i can access "KeyboardOverlapRenderer" when i click on it, it shows me all the member and overrided methods under this class including the Init() method. Now when i try to implment it in one of the Appdelegate members(for example in FinishedLaunching method), i am not getting any error. But when i run the app, the keyboard is not pushing the lower textbox up.

MichaelRumpler · November 2018

@assegd Well, in the previous message you said something else.

Clone the repo, reference the projects source code and debug it. Ideally fix the bug and submit a PR.

assegd · November 2018

@MichaelRumpler
Well on my first message i was just trying to use it on the class-level declaration but it doesnt work. Then i just put it in "FinishedLaunching" method, the error is gone. But when i debug the app, i dont see the lower bottom text being pushed up by the keyboard

Sreeee · December 2018

@Ankur said:
This plugin also doesn't work for a chat scenario:

A list view of messages.
A horizontal Stack containing an Entry for text and a Send button to send the message.

The Chat sample mentioned above works with a little change.

You are right, I am facing the same problem here. So how you fix this issue?

vegiwoo · December 2018

Good day! Project Xamarin Forms, implementation on IOS. Please tell me about the KeyboardOverlapRenderer - when working with entry, everything works fine, the Datepicker also has no problems, but when you return from Picker, the upper edge of the screen goes down exactly to the height of the Picker with which it worked. How to solve this problem? Can @PaulPatarinski help?

andnes · December 2018

For anyone still struggling with this: I had been struggling with this for a while and sort of gave up and wrapped my view in a ScrollView. Seeing as this had unwanted side effects (like not responding properly to grid sizes) I tried the KeyboardOverlap plugin again. I forked the code, updated the Xamarin.Forms NuGet package and referenced the plugin directly from my project. And now it works!

Xamarin

Quick Links

[Xamarin.IOS] [Xamarin.Forms] Soft Keyboard hides Entry at bottom of page.

Answers