We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to remove the space between combobox's editor and dropdown and padding in the suggestion box?

I am trying to populate a SfComboBox in a very small area of my view. Therefore, it has to be very narrow in width and spacing should be customizable. As you can see in the image if these spaces are reduced I can achieve the view I need. Please help me reducing these spaces/ paddings.

combobox-min.png


<combobox:SfComboBox Grid.Row="6" ShowBorder="False" DataSource="{Binding Languages}" FontFamily="W4000" TextSize="11" ShowClearButton="False" DropDownTextSize="11" DropDownItemHeight="24" SelectedIndex="0" >

                                    <combobox:SfComboBox.DropDownButtonSettings>

                                        <combobox:DropDownButtonSettings Width="18" Height="18" >

                                            <combobox:DropDownButtonSettings.View>

                                                <Grid ColumnDefinitions="18">

                                                    <Image Source="chevron_down" WidthRequest="10" HorizontalOptions="Start"/>

                                                    <Frame HeightRequest="12" WidthRequest="12" CornerRadius="6" HasShadow="False" Padding="0" BackgroundColor="{AppThemeBinding Light={StaticResource GreyColor0Light}}" HorizontalOptions="End" VerticalOptions="Start">

                                                        <Label Text="2" VerticalOptions="Center" HorizontalOptions="Center" FontSize="8" TextColor="{AppThemeBinding Light={StaticResource WhiteColor}}" Margin="{OnPlatform iOS='0,0,-2,0'}"/>

                                                    </Frame>

                                                </Grid>

                                            </combobox:DropDownButtonSettings.View>

                                        </combobox:DropDownButtonSettings>

                                    </combobox:SfComboBox.DropDownButtonSettings>

                                </combobox:SfComboBox>


1 Reply

VV Vijayakumar Viswanathan Syncfusion Team November 24, 2022 10:27 AM

Hi Ruvindra,


Thanks for contacting Syncfusion support,


Query 1: How to reduce spaces/ paddings in the ComboBox editor.


We have checked by creating a sample using your code and are not able to reproduce the reported issue in the ComboBox editor. We have attached the image and the sample for your reference. Please check the sample and let us know the details. If our code is different from your need, please share the modified sample with platform details. It will help us to provide a better solution earlier.



Query 2: How to reduce spaces/ paddings in the DropDown Items.


When setting the ItemPadding property as Zero, we can reduce the spacing/ padding for the items in the Dropdown. In the sample, we have provided the ItemPadding as 0. It was working as you expected.


Please get the sample from the attachment. Please let us know if you need any other details.


Thanks,

Vijayakumar V


Attachment: ComboBoxPadding_70192e0c.zip

Loader.
Live Chat Icon For mobile
Up arrow icon