Forum › Xamarin.Forms
Quick Links
[Xamarin.IOS] [Xamarin.Forms] Soft Keyboard hides Entry at bottom of page.
Ankur
USMember ✭✭
USMember ✭✭
[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.
1
Answers
Same issue with you. Any solutions?
You can put all your content inside a ScrollView, then the page will scroll up
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
Did you find a solution to this? I think I'm having exactly the same problem.
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.
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.
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.
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
I am going to try the code here: https://developer.xamarin.com/samples/monotouch/Chat/
I use the KeyboardOverlap plugin. Just install the NuGet package, call
from your AppDelegate and you're done.
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.
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.
Wow wonderful plugin. Thanks for saving hours and hours of my time.
@MichaelRumpler So no need to embedd the page in a Scrollview anymore?
@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).
@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
It works. Thanks @MichaelRumpler.
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 InputControlThe 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).
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>If anyone is still stuck with this, I found a solution that worked for my chat feature. See my answer here
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
It's still the same. Apparently the package is not found yet. Do a Nuget restore and build your project. It should work.
@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.
@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.
@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
You are right, I am facing the same problem here. So how you fix this issue?
Good day! Project Xamarin Forms, implementation on IOS. Please tell me about the
KeyboardOverlapRenderer- when working with entry, everything works fine, theDatepickeralso has no problems, but when you return fromPicker,the upper edge of the screen goes down exactly to the height of thePickerwith which it worked. How to solve this problem? Can @PaulPatarinski help?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!
@andnes I see that the nuget hasn't been updated till now . AM worried if it will cause some other issue with new devices. Did you face any issues with this nuget ? Also it seems to work if I focus on the concerned entry first but if focused on other entries first then then default behavior is repeated
No Asur, it worked fine and is still working as expected. I forked the source code for the plugin from here: https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/KeyboardOverlap
I updated the Xamarin.Forms package in this project and referenced the plugin directly into my project.