SfTextInputLayout Helper Text Prolem on Android and TimePicker border problem.

[Tayyip Emre ÖRNEK]

Hello,

I use sftextinputlayout in my project. There is no problem showing helpertext on ios side but it does not appear on android. It appears only halfway in the last entry, and here the height of the entry is cropped.

Another problem is in the datetimefield area. Divided by stacklayout horizonthal into 2 and the first element is datepicker, 2nd element timepicker. The timepicker automatically comes to the border, but I don't want it.

Thank you in advance for your help.

Attachment: Screen_Shot.png_df40980f.zip

[Hemalatha Marikumar]

Hi Tayyip Emre ÖRNEK, 

 

Greetings from Syncfusion. 

 

We would like to let you know that “Entry content cropped” issue has been resolved by increasing the height request of SfTextInputLayout in platform specific, since it may vary by acceptable pixel difference between iOS and Android.  

 

Time picker border à We have suspected that you have used the Entry for displaying the time picker as dialog. If then, getting your current output is the default appearance of Entry 

 

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/entry

 

By default, Entry displayed in iOS with complete closed border. 

 

Helper text is not seeing in Android à We have checked the reported issue by creating the sample with the below code snippet, itself we can see the helper text.  

 

Ensured SfTextInputLayout version: 18.1.0.46 

 

Code Snippet 

 

 

    <StackLayout> 

        <inputLayout:SfTextInputLayout Hint="Quantity" HelperText="Helping text" ShowHelperText="True" ContainerType="None" Margin="10,0,10,0" > 

            <Entry Text="Domino"/> 

        </inputLayout:SfTextInputLayout> 

        <Entry Text="Default Entry"/> 

    </StackLayout> 

     

 

Output: 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/153832/ze/TextInputLayout-577521204

 

Please check the sample and ensure whether you can reproduce the same issue at your end then please share the device configuration details and sent us by modifying this sample to replicate if possible please share the issue reproducing sample to check this at our end and provide a possible solution. 

 

Regards,
Hemalatha M. 

 

 

 

 

   

[Tayyip Emre ÖRNEK]

Thank you for quick answer, 

This below code for Time problem

else if (properties[i].ControlType == Pratico.Entities.Enums.ControlType.DateTimePicker)

{

    inputLayout.Hint = properties[i].ControlContainer.DateTimePicker.HintSettings.Text;

    inputLayout.IsVisible = properties[i].ControlContainer.DateTimePicker.Appearance.IsVisible;

    inputLayout.IsEnabled = properties[i].ControlContainer.DateTimePicker.Appearance.IsEnabled;

    inputLayout.HelperText = properties[i].ControlContainer.DateTimePicker.HelperText;

    inputLayout.ShowCharCount = properties[i].ControlContainer.DateTimePicker.ShowCharCount;

    if (properties[i].ControlContainer.DateTimePicker.CharMaxLength != null) inputLayout.CharMaxLength = Convert.ToInt32(properties[i].ControlContainer.DateTimePicker.CharMaxLength);

    activeColor = (inputLayout.IsEnabled == false) ? activeColor = Color.Gray : activeColor = Color.Black;

    if (properties[i].ControlContainer.DateTimePicker.Appearance.IsReadOnly != true && properties[i].ControlContainer.DateTimePicker.IconSettings != null)

    {

        inputLayout.TrailingViewPosition = ViewPosition.Inside;

        inputLayout.TrailingView = new Label()

        {

            FontFamily = fontFamily,

            Text = properties[i].ControlContainer.DateTimePicker.IconSettings.TrailingView.IconCs

        };

    }

    var datePicker = new DatePicker()

    {

        Date = properties[i].ControlContainer.DateTimePicker.DatePicker.Date,

        MinimumDate = properties[i].ControlContainer.DateTimePicker.DatePicker.MinimumDate,

        MaximumDate = properties[i].ControlContainer.DateTimePicker.DatePicker.MaximumDate,

        TextColor = activeColor,

        WidthRequest = 110

    };

    var timePicker = new TimePicker()

    {

        Time = properties[i].ControlContainer.DateTimePicker.TimePicker.Time,

        Format = properties[i].ControlContainer.DateTimePicker.TimePicker.Format,

        TextColor = activeColor,

        BackgroundColor = Color.Transparent,

    };

    var stMain = new StackLayout();

    stMain.Orientation = StackOrientation.Horizontal;

    stMain.BackgroundColor = Color.Transparent;

    stMain.Children.Add(datePicker);

    stMain.Children.Add(timePicker);

    inputLayout.InputView = stMain;

    datePicker.DateSelected += DateTimePicker_DateSelected;

    timePicker.PropertyChanged += DateTimePicker_PropertyChanged;

}

``

[Tayyip Emre ÖRNEK]

This Below Code for Helper (By the way, as you can already see the problem on the android side, there is no problem on the ios side.)

inputLayout = new SfTextInputLayout();

inputLayout.ContainerType = ContainerType.Filled;

inputLayout.ErrorColor = Color.Red;

inputLayout.FocusedColor = Color.LightGreen;

inputLayout.UnfocusedColor = Color.DarkGreen;

inputLayout.ShowHelperText = true;

inputLayout.ShowHint = true;

if (properties[i].ControlType == Pratico.Entities.Enums.ControlType.Entry)

{

    inputLayout.Hint = properties[i].ControlContainer.Entry.HintSettings.Text;

    inputLayout.IsVisible = properties[i].ControlContainer.Entry.Appearance.IsVisible;

    inputLayout.IsEnabled = properties[i].ControlContainer.Entry.Appearance.IsEnabled;

    inputLayout.HelperText = properties[i].ControlContainer.Entry.HelperText;

    inputLayout.ShowCharCount = properties[i].ControlContainer.Entry.ShowCharCount;

[Tayyip Emre ÖRNEK]

Thank you for quick answer, 

This below code for Time problem

else if (properties[i].ControlType == Pratico.Entities.Enums.ControlType.DateTimePicker)

{

    inputLayout.Hint = properties[i].ControlContainer.DateTimePicker.HintSettings.Text;

    inputLayout.IsVisible = properties[i].ControlContainer.DateTimePicker.Appearance.IsVisible;

    inputLayout.IsEnabled = properties[i].ControlContainer.DateTimePicker.Appearance.IsEnabled;

    inputLayout.HelperText = properties[i].ControlContainer.DateTimePicker.HelperText;

    inputLayout.ShowCharCount = properties[i].ControlContainer.DateTimePicker.ShowCharCount;

    if (properties[i].ControlContainer.DateTimePicker.CharMaxLength != null) inputLayout.CharMaxLength = Convert.ToInt32(properties[i].ControlContainer.DateTimePicker.CharMaxLength);

    activeColor = (inputLayout.IsEnabled == false) ? activeColor = Color.Gray : activeColor = Color.Black;

    if (properties[i].ControlContainer.DateTimePicker.Appearance.IsReadOnly != true && properties[i].ControlContainer.DateTimePicker.IconSettings != null)

    {

        inputLayout.TrailingViewPosition = ViewPosition.Inside;

        inputLayout.TrailingView = new Label()

        {

            FontFamily = fontFamily,

            Text = properties[i].ControlContainer.DateTimePicker.IconSettings.TrailingView.IconCs

        };

    }

    var datePicker = new DatePicker()

    {

        Date = properties[i].ControlContainer.DateTimePicker.DatePicker.Date,

        MinimumDate = properties[i].ControlContainer.DateTimePicker.DatePicker.MinimumDate,

        MaximumDate = properties[i].ControlContainer.DateTimePicker.DatePicker.MaximumDate,

        TextColor = activeColor,

        WidthRequest = 110

    };

    var timePicker = new TimePicker()

    {

        Time = properties[i].ControlContainer.DateTimePicker.TimePicker.Time,

        Format = properties[i].ControlContainer.DateTimePicker.TimePicker.Format,

        TextColor = activeColor,

        BackgroundColor = Color.Transparent,

    };

    var stMain = new StackLayout();

    stMain.Orientation = StackOrientation.Horizontal;

    stMain.BackgroundColor = Color.Transparent;

    stMain.Children.Add(datePicker);

    stMain.Children.Add(timePicker);

    inputLayout.InputView = stMain;

    datePicker.DateSelected += DateTimePicker_DateSelected;

    timePicker.PropertyChanged += DateTimePicker_PropertyChanged;

}

``

I noticed something like this.

The same problem exists in the datepicker when I change the stacklayout order.

I use picker in stacklayout, not entry as input.

Attachment: Screen_Shot_20200502_at_02.32.49.png_a6b14d32.zip

[Tayyip Emre ÖRNEK]

This Below Code for Helper (By the way, as you can already see the problem on the android side, there is no problem on the ios side.)

inputLayout = new SfTextInputLayout();

inputLayout.ContainerType = ContainerType.Filled;

inputLayout.ErrorColor = Color.Red;

inputLayout.FocusedColor = Color.LightGreen;

inputLayout.UnfocusedColor = Color.DarkGreen;

inputLayout.ShowHelperText = true;

inputLayout.ShowHint = true;

if (properties[i].ControlType == Pratico.Entities.Enums.ControlType.Entry)

{

    inputLayout.Hint = properties[i].ControlContainer.Entry.HintSettings.Text;

    inputLayout.IsVisible = properties[i].ControlContainer.Entry.Appearance.IsVisible;

    inputLayout.IsEnabled = properties[i].ControlContainer.Entry.Appearance.IsEnabled;

    inputLayout.HelperText = properties[i].ControlContainer.Entry.HelperText;

    inputLayout.ShowCharCount = properties[i].ControlContainer.Entry.ShowCharCount;

helpertext does not appear even though I do the height adjustment etc.

helpertext is coming in ios. but it doesn't come on android.

[Anandraj Selvam]

Hi Tayyip Emre ÖRNEK, 

  

Thanks for the update. 

  

We were able to reproduce the reported issue and currently we are validating the root cause for the same. We will update the complete details on May 06, 2020.  

  

We appreciate your patience until then. 

  

Regards, 

Anand Raj S.   

[Tayyip Emre ÖRNEK]

Hi Tayyip Emre ÖRNEK, 

  

Thanks for the update. 

  

We were able to reproduce the reported issue and currently we are validating the root cause for the same. We will update the complete details on May 06, 2020.  

  

We appreciate your patience until then. 

  

Regards, 

Anand Raj S.   

Thank you

[Anandraj Selvam]

Hi TayyipEmre ÖRNEK, 

  

We would like to let you know that we didn't have support for SfTextInputLayout input view to act as a layout like StackLayout or Grid. SfTextInputLayout is just a container with only one supported element and we have to provide Single element inside the SfTextInputLayout. If we want to add more element, create SfTextInputLayout for each element. 

  

Please revert us for further investigation. 

  

Regards, 

Anand Raj S. 

[Tayyip Emre ÖRNEK]

Hi TayyipEmre ÖRNEK, 

  

We would like to let you know that we didn't have support for SfTextInputLayout input view to act as a layout like StackLayout or Grid. SfTextInputLayout is just a container with only one supported element and we have to provide Single element inside the SfTextInputLayout. If we want to add more element, create SfTextInputLayout for each element. 

  

Please revert us for further investigation. 

  

Regards, 

Anand Raj S. 

I added 2nd inputlayout on your recommendation and solved the problem by making platform-based changes in the design.

I am waiting for your feedback on helpertext.

thank you.

[Anandraj Selvam]

Hi TayyipEmre ÖRNEK,  

  

As we said earlier, we have set the helper text in Android that is working fine even we have ensured the same by setting Helper text in your provided code snippet. It will be better to ensure that your sample again or else share the more details regarding the issue to replicate the same and provide a possible solution. 

  

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

 

  

Screenshot: 

  

 

  

If possible, could you please share the entire page details (arrange elements) or else complete sample to check it further. 

  

Regards,  

Anand Raj S.