How to change the DropDown width when ComboBox placed inside TextInputLayout?

1 min read

When using ComboBox inside TextInputLayout, the width of the control can also be adjusted with TextInputLayout’s width. So, the drop-down width can be changed when adding ComboBox inside TextInputLayout by setting the DropDownWidth property in Focused event of ComboBox as in the below code snippet.

Code snippets [Xaml]:

<StackLayout Padding="10"
             HeightRequest="50"
             HorizontalOptions="Start"
             VerticalOptions="Start"
             WidthRequest="200">
             <inputLayout:SfTextInputLayout Hint="Choose">
                 <combobox:SfComboBox x:Name="comboBox"
                                      DataSource="{Binding ItemsCollection}"
                                      DisplayMemberPath="Name"
                                      Focused="ComboBox_Focused"
                                      HeightRequest="40"
                                      IsEditableMode="True"
                                      WidthRequest="200" />
             </inputLayout:SfTextInputLayout>
</StackLayout>

Code snippets [C#]:

private void ComboBox_Focused(object sender, FocusEventArgs e)
{
            comboBox.DropDownWidth = 400;
}

Output:

Dropdown width

Did you find this information helpful?

Yes

Comments (0)

How to change the DropDown width when ComboBox placed inside TextInputLayout?

Access denied