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

AnkurAnkur USMember ✭✭
edited October 2015 in Xamarin.Forms

[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.

Answers

  • XiaoFanXiaoFan CAMember

    Same issue with you. Any solutions?

  • NeelamNeelam USMember

    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 :smile:

  • GarethWynnGarethWynn USMember ✭✭

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

  • JulienRosenJulienRosen CAMember ✭✭✭✭
    edited 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.

  • GarethWynnGarethWynn USMember ✭✭

    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.

  • GarethWynnGarethWynn USMember ✭✭

    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.

  • voidvoid DKBeta ✭✭✭

    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

  • AnkurAnkur USMember ✭✭
  • AnkurAnkur USMember ✭✭

    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.

  • MommMomm USMember ✭✭✭

    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-MayuJay-Mayu USMember ✭✭

    @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.

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

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

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    @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).

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    @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

  • DevaPalanisamyDevaPalanisamy GBUniversity ✭✭

    @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.

  • PhilippSumiPhilippSumi USMember ✭✭✭

    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).

  • DamienTouchetteDamienTouchette USMember
    edited 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>
    
  • MichaelMcKinneyMichaelMcKinney USMember

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

  • assegdassegd Member ✭✭

    @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

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    @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.

  • assegdassegd Member ✭✭

    @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.

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    @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.

  • assegdassegd Member ✭✭

    @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

  • SreeeeSreeee INMember ✭✭✭✭✭

    @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?

  • vegiwoovegiwoo Member ✭✭
    edited 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?

  • andnesandnes USMember ✭✭

    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!

Sign In or Register to comment.