Entry is almost covering the hint text and the hint is not animated on Android - works fine on IOS

Hi!

When putting an entry into the sfTexinputLayout I get an odd UX on Android. 

The entry is much higher on the Android and almost covering the whole hint text. 

Also the hint is not animated.

On IOS the control behaves as advertised. 

All 3 ContainerTypes are almost covered by the entry. 


The Xaml used: 

<inputLayout:SfTextInputLayout

                            EnableHintAnimation="True"

                            Hint="Email"

                            HelperText="Nødvendig *"

                            ShowHint="True"

                            ContainerType="Outlined"

                            >

                            <Entry />

 </inputLayout:SfTextInputLayout>


VS, Win: 16.10.4 

Syncfusion.Xamain.Core: 19.2.0.51 

Xamarin forms: 5.0.0.2083 


Any advice appreciated! 


Regards 

Flemming Juul


5 Replies 1 reply marked as answer

SS Sridevi Sivakumar Syncfusion Team August 5, 2021 11:21 AM UTC

Hi Flemming Juul,

We have prepared a sample in SfTextinputLayout with your shared code snippet and tested the sample. It is working fine at our end. Please have a tested sample and video from below link:

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TestInputLayout1847325948

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Demo-621051267

Can you please check the issue with the attached sample and let us know whether it is reproduced or not?

Can you please provide detailed information on the reported query?

·       Please provide the parent view structure where the SfTextinputLayout was added
·       Can you please share the issue reproducing video?
·       If the issue is not reproduced in the above sample, please revert us by modifying the sample based on your application along with the replication procedure.
·       Can you provide the overall page structure used in your project?
·       Can you share the issue reproducing device configuration details?  
 
 
Regards,
 
Sridevi S. 
 



JA Jano replied to Sridevi Sivakumar October 5, 2022 12:21 PM UTC

Hi,


I am experiencing the same issue with Syncfusion version 20.2.0.43 and Xamarin Forms version 5.0.0.2012


Edit: I can confirm the issue arises when the Xamarin Forms package is upgraded beyond version 5.0.0.1931 . Syncfusion version 19.4.0.43 works fine with Xamarin Forms version 5.0.0.1931, but the issue arises when Xamarin Forms version is upgraded to any newer version than 5.0.0.1931.



ET Eswaran Thirugnanasambandam Syncfusion Team October 6, 2022 12:22 PM UTC

As mentioned, we tested the reported problem “Entry is almost covering the hint text and the hint is not animated on Android.”  with the Syncfusion version 20.2.0.43 and Xamarin Forms version 5.0.0.2012. But we are unable to replicate the reported problem from our side. Please get the tested video and sample from the below attachment.


If you still face any problem, can you revert us by modifying the sample based on your application scenario along with the replication steps. It will help us provide an appropriate solution at the earliest.


Attachment: TextInputLayoutDemo_d18a4738.zip


FJ Flemming Juul October 22, 2022 03:23 PM UTC

The demo from the Syncfusion Team does indeed work as advertised so maybe a picture and the xaml file can shed some light on the issue...

The picture shows the entry in the focused state, but the entry "overlay" does not go away when unfocused - as it does on IOS.

Screenshot.jpeg


The xaml excerpt:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage

    x:Class="MurosaFamily.Views.AppointmentPage"

    xmlns="http://xamarin.com/schemas/2014/forms"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

    xmlns:ViewModels="clr-namespace:MurosaFamily.ViewModels"

    xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"

    xmlns:inputLayout="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"

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

    xmlns:local="clr-namespace:MurosaFamily.Helpers"

    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

    ios:Page.UseSafeArea="true"

    Visual="Material">

    <ContentPage.Resources>

        <ResourceDictionary>

            <xct:InvertedBoolConverter x:Key="InvertedBoolConverter" />

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.BindingContext>

        <ViewModels:AppointmentViewModel />

    </ContentPage.BindingContext>

    <ContentPage.Content>

        <StackLayout x:Name="MainWindow" Style="{StaticResource MainWindowStyle}">

            <Grid x:Name="Heading" Style="{StaticResource HeadingGrid}">

                <Grid.RowDefinitions>

                    <RowDefinition Height="40" />

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="35" />

                    <ColumnDefinition Width="*" />

                    <ColumnDefinition Width="35" />

                </Grid.ColumnDefinitions>

                <Label

                    x:Name="HeadingLeft"

                    Grid.Row="0"

                    Grid.Column="0"

                    Style="{StaticResource LeftHeading}">

                    <Label.GestureRecognizers>

                        <TapGestureRecognizer Command="{Binding Source={x:Static local:GeneralCommands.MainMenuCommand}}" />

                    </Label.GestureRecognizers>

                </Label>

                <Label

                    x:Name="HeadingCenter"

                    Grid.Row="0"

                    Grid.Column="1"

                    Style="{StaticResource CenterHeading}"

                    Text="{Binding PageTitle}" />

                <Label

                    x:Name="HeadingRight"

                    Grid.Row="0"

                    Grid.Column="2"

                    Style="{StaticResource RightHeading}">

                    <Label.GestureRecognizers>

                        <TapGestureRecognizer Command="{Binding Source={x:Static local:GeneralCommands.SettingsCommand}}" />

                    </Label.GestureRecognizers>

                </Label>


            </Grid>

            <StackLayout x:Name="LocalWindow" Style="{StaticResource LocalContentStyle}">

                <ScrollView Margin="0">

                    <Grid

                        Margin="0"

                        Padding="0"

                        BackgroundColor="Transparent"

                        HorizontalOptions="FillAndExpand"

                        VerticalOptions="FillAndExpand">

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                            <RowDefinition Height="Auto" />

                             <RowDefinition Height="Auto" />

                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="50*" />

                            <ColumnDefinition Width="50*" />

                        </Grid.ColumnDefinitions>

                         <inputLayout:SfTextInputLayout Hint="Navn" Grid.Row="0" Grid.Column="0" IsHintAlwaysFloated="False" FocusedStrokeWidth="4"

                                                       Grid.ColumnSpan="2" ContainerType="Outlined" EnableFloating="True"

                                                       ReserveSpaceForAssistiveLabels="True"

                                                      >


                        <Entry

                            FontSize="Small"

                            HeightRequest="55"

                            Keyboard="Text"

                            Text="{Binding Name}"

                            TextColor="Black">

                            <Entry.Behaviors>

                                <xct:CharactersValidationBehavior

                                    x:Name="EventNameValidation"

                                    CharacterType="Alphanumeric"

                                    Flags="ValidateOnUnfocusing"

                                    IsValid="{Binding EventNameIsValid}"

                                    MinimumCharacterCount="1" />

                            </Entry.Behaviors>

                        </Entry>

                            </inputLayout:SfTextInputLayout>

                        <Entry

                            Grid.Row="1"

                            Grid.Column="0"

                            Grid.ColumnSpan="2"

                            BackgroundColor="#a7e4d8"

                            FontSize="Small"

                            HeightRequest="59"

                            Keyboard="Text"

                            Placeholder="Sted"

                            PlaceholderColor="Black"

                            Text="{Binding Location}"

                            TextColor="Black" />

                        <Label

                            Grid.Row="2"

                            Grid.Column="0"

                            FontSize="Small"

                            HeightRequest="59"

                            Text="Hele dagen"

                            VerticalTextAlignment="Center" />

                        <Switch

                            x:Name="IsAllDay"

                            Grid.Row="2"

                            Grid.Column="1"

                            Margin="6,0,0,0"

                            BackgroundColor="Transparent"

                            HorizontalOptions="Start"

                            IsToggled="{Binding IsAllDay}"

                            VerticalOptions="Center" />


Please let me know if you need further information.

Regards

Flemming Juul



RS Ragul Subramani Syncfusion Team October 24, 2022 08:45 AM UTC

We have checked the provided snippet and it is framework level issue. Already we have raised a bug report for this in GitHub. Please find the link below.


https://github.com/xamarin/Xamarin.Forms/issues/14206


Also, we have logged feedback for this on our side to follow up this. You can keep track of the bug from the feedback portal below.


https://www.syncfusion.com/feedback/31265


Marked as answer
Loader.
Up arrow icon