SfTextInputLayout control expands beyonds expected width on IOS and Mac Catalyst

[Karl Southern]

Hi there,

I have the following layout:

• ContentPage
• ScrollView
• VerticalStackLayout (Margin 20,0,20,0)
• Grid
  • Col1: Image
  • Col2: Label
  • Col3: SfTextLayout with embedded Entry

This works fine in Windows and on the Android simulator. When I use the iPhone simulator, the SfTextInputStyle extends beyond the dimensions. The problem is worse on Mac Catalyst. In my screenshots, I've shown an SfTextInputStyle outside the grid, an SfTextInputLayout in the grid with the SfTextInputLayout and the same grid but with the Entry on its own. You can see the behaviour is different. Is this me, or is there a problem?

Windows:

Android:

IOS (iPhone)

Mac Catalyst:

The code for the two grids (only for comparison) is below:

<Grid ColumnSpacing="5" >

     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="24" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Image Source="add_bk.png" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" >
         <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="prefix_Tapped" />
         </Image.GestureRecognizers>
    </Image>
    <Label Text="+44" TextColor="Grey" FontSize="18" Grid.Column="1" VerticalOptions="Center"/>
    <sf:SfTextInputLayout Grid.Column="2"
              Hint="Please enter your phone number"
              ErrorText="Phone number is not valid"
              x:Name="phoneField"
              IsHintAlwaysFloated="False">
        <Entry Text="011123456789" Grid.Column="2" x:Name="embeddedPhoneEntry" />
    </sf:SfTextInputLayout>
<Grid>

<Grid ColumnSpacing="5" >
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="24" />
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="*" />
     </Grid.ColumnDefinitions>

     <Image Source="add_bk.png" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" >
         <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="prefix_Tapped" />
         </Image.GestureRecognizers>
     </Image>
    <Label Text="+44" TextColor="Grey" FontSize="18" Grid.Column="1" VerticalOptions="Center"/>
    <Entry Text="011123456789" Grid.Column="2" x:Name="standalonePhoneEntry" />
</Grid>

[Karl Southern]

Sorry, I should have included the versions. Both Syncfusion.Maui.Core and Syncfusion.Maui.Inputs are on version 23.1.36

[Arunachalam Kandasamy Raja]

Hi Karl,

 

Thank you for reaching out to Syncfusion support.

 

We have carefully reviewed the provided code snippet and created the sample based on the code snippet. We were not able to reproduce the reported issue at our end. For your reference, we have added the tested sample to the attachment. Please take a look at the attachment and verify whether the issue can be reproduced on your side. If not, please make any necessary modifications to replicate the problem. Once done, kindly share the sample with us and provide details about which iOS version you are using. This will allow us to conduct a more comprehensive investigation of the issue.

 

Regards,

Arunachalam K

Attachment: TextInputLayoutMaui184633_d8955103.zip

[Karl Southern]

I can't reproduce the issue with the code snippet even after applying the modifications imposed by my SfTextInputLayout defaults in Styles.xaml.

[Brundha Velusamy]

Hi Karl,

 

Could you please provide a sample that replicates the reported issue? This will be helpful for us to assist you further and provide a possible solution at the earliest.

 

Regards,

Brundha V

[Karl Southern]

I'm so sorry for the late reply.

We revised the original layout to get something working and assumed it was something we were doing. We are now some way beyond where we were when I 

[AhamedAliNishad JahirHussain]

Hi Karl,

 

Based on your latest update, we confirm that the issue has been resolved on your end. If you have any other queries, please let us know the details.

Regards,

Ahamed Ali Nishad.