Floating Hint - Overlaps at combobox selected value upon setting value

[Yas]

Hi, floating of HInt overlaps at combobox upon setting value. See image below

Controls:

Syncfusion.Xamarin.SfComboBox: 20.2.0.44

Syncfusion.Xamarin.Core: 20.2.0.44

Tried to update to 20.3.0.60, but same issue encounter.

Code:

ContainerType="Outlined"

EnableFloating="False">

x:Name="comboBox"

DataSource="{Binding ReasonList}"

DisplayMemberPath="Value"

SelectedValuePath="Id"

IsEditableMode="False"

ShowClearButton="False"

SelectedValue="{Binding TypeId}" />

Binding value from View Model

Selecting value:

[Eswaran Thirugnanasambandam]

Hi Yas,

We prepared a sample with the provided code snippet and checked the reported problem “Floating Hint - Overlaps at combobox selected value upon setting value”. But we are unable to reproduce the problem in our side in both reported version (20.2.0.44) and also in latest NuGet version(20.3.0.61). Please get the tested sample from the below attachment.

If you still face any problem, please revert us by modifying the sample based on your application scenario. This will allow us to assist you with a better solution as soon as possible.

Regards,

Eswaran

Attachment: SfTextInputLayout_940c78cc.zip

[Nelissen Benoît]

Hi,

Same problem with version 21.2.4. I tried to set IsHintAlwaysFloated="true" on some SfTextInputLayout but not on all. I think it is when SelectedItem from SfComboBox is not set.

[Nelissen Benoît]

I tried the sample which I customized.

Xaml :

            <inputLayout:SfTextInputLayout
                ContainerType="Outlined"
                FocusedColor="Black"
                Hint="Name"
                OutlineCornerRadius="8"
                UnfocusedColor="Gray">
                <inputLayout:SfTextInputLayout.HintLabelStyle>
                    <inputLayout:LabelStyle
                        FontSize="16"
                        Color="Green" />
                </inputLayout:SfTextInputLayout.HintLabelStyle>
                <combobox:SfComboBox
                    x:Name="comboBox"
                    DataSource="{Binding EmployeeCollection}"
                    DisplayMemberPath="Value"
                    IsEditableMode="False"
                    SelectedIndex="{Binding Index, Mode=TwoWay}"
                    SelectedItem="{Binding Employee, Mode=TwoWay}"
                    SelectedValue="{Binding Test, Mode=TwoWay}"
                    ShowClearButton="False"
                    TextColor="Green" />
            </inputLayout:SfTextInputLayout>
            <Button
                BackgroundColor="Red"
                Command="{Binding SetCommand}"
                Text="Set"
                TextColor="Blue" />

In the viewmodel when I try to set the SelectedIndex, SelectedItem from the code (via the button) the value doesn't change on UI.

[Swetha Vasanthakumar]

Hi  Nelissen,

 

Query 1: Floating Hint - Overlaps at combobox.

 

     We have validated your query and checked the hint overlap issue in the latest nuget version 21.2.4 but we are unable to reproduce the reported issue at our end.

Query 2: In the ViewModel when I try to set the SelectedIndex, SelectedItem from the code (via the button) the value doesn't change on UI.

 

   We have checked the reported issue based on the provided code snippet and noticed that the NotifyPropertyChanged method is not included in the sample. We have added INotifyProperty changed in view model and now the selected item and selected index properties are updated correctly in SfComboBox.

 

Code Snippet

 

C#:

 

public class EmployeeViewModel : INotifyPropertyChanged

    {

       ...

        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); }

 

        private int _Index;

        public int Index {

            get { return _Index; }

            set {

                _Index = value;

                NotifyPropertyChanged(nameof(Index));

            }

 

        }

 

        private object _Employee;

        public object Employee {

            get { return _Employee; }

            set

            {

                _Employee = value;

                NotifyPropertyChanged(nameof(Employee));

            }

        }

 

  public event PropertyChangedEventHandler PropertyChanged;

     ...

}

 

 

 

We have modified the sample based on this and please get a sample from the attachment.

 

Could you please check the sample, If you still face any problems, please revert us by modifying the sample based on your application scenario. This will help us to assist you with a better solution as soon as possible.

 

Regards,

Swetha V

Attachment: SfTextInputLayout_5d184de1.zip