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

[Flemming Juul]

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

[Sridevi Sivakumar]

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. 

 

[Jano]

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.

[Eswaran Thirugnanasambandam]

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

[Flemming Juul]

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.

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

[Ragul Subramani]

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