The input box is obscured by the keyboard done button.

Hello,


Is there any way to show the input box over the extended keyboard layout? My input view is obscured by the keyboard done button. Please let me know how to solve this.


Thank you,
Ilnam J.


Attachment: Screen_Shot_20200722_at_11.53.23_PM_1240307b.zip

23 Replies

KK Karthikraja Kalaimani Syncfusion Team July 24, 2020 05:56 AM UTC

Hi IInam,

We suspect that this occurs because of the safe area is didn’t considered for the current page in iPhone X devices. So, could you please set the UseSafeArea as true for the current page and let us know whether or not the issue has been resolved? If not, please share the information below to further test the problem and provide you with an earlier better solution.

i) Current Page code snippet
ii) Xamarin Forms version
iii) SfChat version

Regards,
 
Karthik Raja 



IL Ilnam July 24, 2020 06:29 AM UTC

Hello Karthik,

Thank you! I was able to solve the problem with your solution.

<ContentPage ...

xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true">

Best,
Ilnam


KK Karthikraja Kalaimani Syncfusion Team July 27, 2020 04:59 AM UTC

Hi IInam,

Thanks for the update.
We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you.  

Regards,
Karthik Raja
 



PZ Pedro Zavala August 28, 2020 01:01 AM UTC


UseSafeArea don't work..

xamarin: 4.7.0.1142
sfchat: 18.2.0.55
iPhone 11 Pro iOS 13.6


SS Sivaraman Sivagurunathan Syncfusion Team August 29, 2020 06:24 AM UTC

Hi Ilnam, 

Thanks for the update. 

We have checked your reported issue and we are able to reproduce the issue form our side. currently we are validate the reported issue. we will update the further details on or before 2nd September 2020. We appreciate your patience until then.    

Regards, 
Sivaraman S 



KK Karthikraja Kalaimani Syncfusion Team September 4, 2020 11:40 AM UTC

Hi Pedro,

Sorry for the miss-communication.

This is already known issue and we have logged bug report for the same. We will fix the issue and include the fix in our upcoming weekly nuget which is scheduled on 22nd Sep 2020. We appreciate your patience until then.

Regards,
Karthik Raja 



PZ Pedro Zavala September 5, 2020 02:12 AM UTC

Thanks!


KK Karthikraja Kalaimani Syncfusion Team September 7, 2020 06:29 AM UTC

Hi Pedro,

 
Thanks for the update. We will update you once we fixed the reported issue. We appreciate your patience until then.

Regards, 
Karthik Raja 



UJ Ulf J October 22, 2020 09:35 AM UTC

We have the same issue in XF Android, the input area is complete gone as we don't use safe areas in our app, and that is by design. So a fix for this would be great. Or at least property on the control to add in the margin itself, as we have the safe area height stored in the app.


KK Karthikraja Kalaimani Syncfusion Team October 23, 2020 01:47 PM UTC

Hi Ulf,

 
Could you please share the issue picture? because it will help us to check the issue in our side.

Regards,
Karthik Raja  



UJ Ulf J October 25, 2020 12:00 AM UTC

Hi!

Here is one with keyboard closed and one opened.

Here is the setup in MainActivity for creating a full-screen, removing the safe areas, we handle those areas our self. Targeting Android 10.

            Window.SetStatusBarColor(Android.Graphics.Color.Transparent);           
            Window.AddFlags(WindowManagerFlags.LayoutNoLimits);                     
            Window.AddFlags(WindowManagerFlags.LayoutInScreen);                     
            Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);      
            Window.SetNavigationBarColor(Android.Graphics.Color.White);   
            Window.DecorView.SetFitsSystemWindows(true);        

I have tried with safe areas activated (removing the code above) and then you control works as intended, but we cant use safe areas, so we need the control to support that bottom safe area is removed, either by you doing this automatically or if we at least can have a property on the control that will add a offset to its calculated position, so we can compensate for this problem manually. We manually get the safe area heights, this so we can compensate for those areas our self, but then we will have full control how this will be utilized, and if the safe area is on we wont have that possibility. But as you can see in the image, the chat control is not so user friendly for the moment for our setup.

So if you want to recreate the problem you need the setup above, and you also need a frame in the bottom of your view that will manually compensate for the bottom safe area height. 

Something like this

   <ContentPage.Content>
    <Grid
        RowSpacing="0"
        ColumnSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        
        <!--Page content-->
        <Grid
                Grid.Row="1"
                ColumnSpacing="0"
                Margin="0">

                <RelativeLayout                   
                        Grid.Row="0"
                        Grid.Column="0"
                        Grid.RowSpan="2"
                        Grid.ColumnSpan="3">
                    <sfChat:SfChat 
                            x:Name="sfChat"
                            Background="#32415c"
                            VerticalOptions="FillAndExpand" 
                            HorizontalOptions="FillAndExpand"
                            StickyTimeBreak="False"
                            MessageShape="RoundedRectangle"
                            ShowOutgoingMessageAvatar="True"
                            ShowIncomingMessageAvatar="True"
                            SendMessageCommand="{Binding SendMessageCommand}"
                            TypingIndicator="{Binding TypingIndicator}"
                            ShowTypingIndicator="{Binding ShowTypingIndicator}"
                            Messages="{Binding Messages}"
                            CurrentUser="{Binding CurrentUser}"
                            IncomingMessageTimestampFormat="hh:mm tt"
                            OutgoingMessageTimestampFormat="hh:mm tt"
                            ShowTimeBreak="True"
                            ShowKeyboardAlways="False"
                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
                            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}" 
                            SendMessage="SfChat_OnSendMessage" />
                    <badge:SfBadgeView 
                            x:Name="ScrollDown" 
                            HorizontalOptions="CenterAndExpand"
                            VerticalOptions="CenterAndExpand" 
                            BackgroundColor="Transparent" 
                            IsVisible="{Binding IsBadgeViewVisible}"
                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=sfChat,Property=Height,Factor=1,Constant=-95}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=sfChat,Property=Width,Factor=1,Constant=-45}">
                        <badge:SfBadgeView.Content>
                            <Image x:Name="ScrollButton" 
                                       HeightRequest="29" 
                                       WidthRequest="27" 
                                       Source="rla_Scroll_down.png" 
                                       BackgroundColor="Transparent" 
                                       HorizontalOptions="CenterAndExpand" 
                                       VerticalOptions="CenterAndExpand"/>
                        </badge:SfBadgeView.Content>
                    </badge:SfBadgeView>
                </RelativeLayout>

            </Grid>

        <Frame 
                Grid.Row="2"
                x:Name="BottomAreaCompensation"
                HeightRequest="50"
                Padding="0"
                CornerRadius="0"
                HasShadow="False"
                Opacity="{x:OnPlatform iOS=1, Android=1}"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
            <Frame.BackgroundColor>
                <OnPlatform x:TypeArguments="Color" Android="{StaticResource TransparentColor}" iOS="{StaticResource TransparentColor}"></OnPlatform>
            </Frame.BackgroundColor>
            <Frame.BorderColor>
                <OnPlatform x:TypeArguments="Color" Android="{StaticResource TransparentColor}" iOS="{StaticResource TransparentColor}"></OnPlatform>
            </Frame.BorderColor>
        </Frame>
    </Grid>
</ContentPage.Content>

Attachment: Screenshot_7660fb75.zip


KK Karthikraja Kalaimani Syncfusion Team October 26, 2020 12:59 PM UTC

 
Hi Ulf,

Thanks for the update. Currently, we are validating the issue. So, we will validate and update the details on or before 28th Oct 2020. We appreciate your patience until then.

Regards,
Karthik Raja 



KK Karthikraja Kalaimani Syncfusion Team October 28, 2020 02:24 PM UTC

 
Hi Ulf,

Based on the code snipped we have checked the issue in Android Oneplus 7T device. Unfortunately, we could not able to reproduce the issue in our end and it is working fine as expected. We have attached the tested screenshots.


 
 
 


Please let us know the following details to check the issue.

i) Device details
ii) SfChat and Xamarin forms version
iii) If possible, reproduce the issue in simple sample.

Regards,
Karthik Raja 



UJ Ulf J October 29, 2020 01:24 PM UTC

Hi!

1. I have a tested on a Samsung Galaxy S8+ 
2  I use Syncfusion 18.3.35 with  XF 4.5 (SampelBrowser.SfChat)

So, I took your included sfchat app, open the GettingStarted.xaml and replaced the content with this

<sample:SampleView x:Class="SampleBrowser.SfChat.GettingStarted"
                  xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:local="clr-namespace:SampleBrowser.SfChat"
                  xmlns:sample="clr-namespace:SampleBrowser.Core;assembly=SampleBrowser.Core"
                   xmlns:sfchat="clr-namespace:Syncfusion.XForms.Chat;assembly=Syncfusion.SfChat.XForms"
                   xmlns:badge="clr-namespace:Syncfusion.XForms.BadgeView;assembly=Syncfusion.SfBadgeView.XForms">

    <sample:SampleView.Behaviors>
        <local:GettingStartedBehavior></local:GettingStartedBehavior>
    </sample:SampleView.Behaviors>
    
    <sample:SampleView.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel" />
    </sample:SampleView.BindingContext>

    <sample:SampleView.Content>
        <Grid
            RowSpacing="0"
            ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>

            <Frame 
                Grid.Row="1"
                HeightRequest="50"
                Padding="0"
                CornerRadius="0"
                HasShadow="False"
                BackgroundColor="Gray"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
            </Frame>
            
            <RelativeLayout Grid.Row="1">
                <sfchat:SfChat x:Name="sfChat" 
                           StickyTimeBreak="False"
                           MessageShape="RoundedRectangle"
                           ShowOutgoingMessageAvatar="True"
                           ShowIncomingMessageAvatar="True"
                           SendMessageCommand="{Binding SendMessageCommand}"
                           TypingIndicator="{Binding TypingIndicator}"
                           ShowTypingIndicator="{Binding ShowTypingIndicator}"
                           Messages="{Binding Messages}"
                           CurrentUser="{Binding CurrentUser}"
                           IncomingMessageTimestampFormat="hh:mm tt"
                           OutgoingMessageTimestampFormat="hh:mm tt"
                           ShowTimeBreak="True"
                           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
                           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}">
                </sfchat:SfChat>

                <badge:SfBadgeView x:Name="ScrollDown" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Transparent" IsVisible="{Binding IsBadgeViewVisible}"
                               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,ElementName=sfChat,Property=Height,Factor=1,Constant=-105}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,ElementName=sfChat,Property=Width,Factor=1,Constant=-55}">
                    <badge:SfBadgeView.Content>
                        <Image x:Name="ScrollButton" HeightRequest="29" WidthRequest="27" Source="ScrollDown.png" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                    </badge:SfBadgeView.Content>

                </badge:SfBadgeView>
            </RelativeLayout>

            <Frame 
                Grid.Row="2"
                x:Name="BottomAreaCompensation"
                HeightRequest="50"
                Padding="0"
                CornerRadius="0"
                HasShadow="False"
                BackgroundColor="Red"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
            </Frame>
        </Grid>
    </sample:SampleView.Content>
</sample:SampleView> 

replaced the OnCreateMethod in MainActivity with this

        protected override void OnCreate(Bundle bundle)
        {
            Xamarin.Forms.Platform.Android.FormsAppCompatActivity.TabLayoutResource = Resource.Layout.Tabbar;
            Xamarin.Forms.Platform.Android.FormsAppCompatActivity.ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);
            global::Xamarin.Forms.Forms.Init(this, bundle);
            Xamarin.Essentials.Platform.Init(this, bundle);
            //// Pass the activity and Resources to core android project

            Window.SetStatusBarColor(Android.Graphics.Color.Transparent);         
            Window.AddFlags(WindowManagerFlags.LayoutNoLimits);                  
            Window.AddFlags(WindowManagerFlags.LayoutInScreen);                    
            Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);       
            Window.SetNavigationBarColor(Android.Graphics.Color.White);            
            Window.DecorView.SetFitsSystemWindows(true);                          

            SampleBrowser.Core.Droid.CoreSampleBrowser.Init(this.Resources, this);
            this.LoadApplication(new App());
        }

and the problem was there again

Attachment: Screenshot_20201029141921_642de73c.zip


UJ Ulf J October 29, 2020 01:26 PM UTC

Using android 10 on the device


KK Karthikraja Kalaimani Syncfusion Team October 30, 2020 11:39 AM UTC

Hi Ulf J

Thanks for the update.

Now, we could able to reproduce the issue. Currently, we are analyzing the issue in source level. So, we will update the details on or before 3rd Nov 2020. We appreciate your patience until then.

Regards,
Karthik Raja 



KK Karthikraja Kalaimani Syncfusion Team November 3, 2020 10:03 AM UTC

Hi Ulf,

Thank you for your patience.

After the deep analysis, we found the problem was detected on the LayoutNoLimits. If the LayoutNoLimits enabled the scroll is automatically disabled from the framework side. So, only the InputView is showing behind the keyboard when the keyboard is open in SfChat. You can expect the same behavior with StackLayout and Editor. We have attached the sample for your reference.

sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfChat_(2)600976211.zip


Regards,
Karthik Raja 



GV Georgi Velikov replied to Karthikraja Kalaimani January 6, 2021 05:21 PM UTC

Hi Pedro,

Sorry for the miss-communication.

This is already known issue and we have logged bug report for the same. We will fix the issue and include the fix in our upcoming weekly nuget which is scheduled on 22nd Sep 2020. We appreciate your patience until then.

Regards,
Karthik Raja 


Hi,

I am not sure this has been resolved on the 22nd September release, as you have mentioned

I am running version "18.3.0.35" which was release don 1st October.

The issue with the text field hiding underneath the keyboard is still there.

Could you please confirm which release has resolved the issue?

Devices: 
iPhone 11 14.3
iPhone SE (2) 14.3
iPhone SE (1) 12.3

Xamarin.Forms: 4.8.0.1269




PK Pradeep Kumar Balakrishnan Syncfusion Team January 7, 2021 05:17 PM UTC

Hi Georgi, 
 
Thank you for your update. 
 
Space between the editor and keyboard is fixed in the version “18.3.0.35 
 
Please provide the details in which page and layout the chat control is loaded. It will be helpful for us to prepare sample and validate the reported query. 
 
Regards, 
Pradeep Kumar B  
   



GV Georgi Velikov January 8, 2021 01:05 PM UTC

Shell -> Modal stack -> Content Page -> Grid > SfChat

Is the structure I am using


PK Pradeep Kumar Balakrishnan Syncfusion Team January 11, 2021 07:25 PM UTC

Hi Georgi, 
 
Thank you for the update. 
 
Based on the provided details we will prepare sample and update validation details by end of day (January 12, 2021). We appreciate your patience until then. 
 
Regards, 
Pradeep Kumar B 



PK Pradeep Kumar Balakrishnan Syncfusion Team January 12, 2021 08:41 PM UTC

Hi Georgi  
 
Sorry for the delay caused.  
  
We are still checking on to replicate the issue from our side using shell page. We need one more day for validation. Let you know the validation details by 13th January 2021. We appreciate your patience until then.  
Regards, 
Pradeep Kumar B 



PK Pradeep Kumar Balakrishnan Syncfusion Team January 13, 2021 07:02 PM UTC

Hi Georgi, 
 
Thank you for your patience.  
 
We have checked and able to replicate the Issue “Extra space is added between the keyboard and chat editor in mentioned Xamarin forms version 4.8.0.1269” and SF v18.3.0.35 and current Sf v18.4.0.34. We have attached test sample and screenshot of the issue.  
 
  
Are you facing the same extra space between keyboard and chat editor view, we defined green color to message Input view to highlight chat bottom for better understanding? 
 
Please check the sample and screenshot, If the sample and reported issue is different, kindly modify the sample based on your scenario and revert us back with replication procedure to replicate the issue. It will be helpful for us to check and resolve both the found issue and provide you the solution earlier. 
 
Regards, 
Pradeep Kumar B 
 


Loader.
Up arrow icon