SfCombobox wrong width size on iOS

[David Ziak]

Hello,
   I want to create simple way to select country. I have list of countries (Name, Image) as source for SfCombobox, hovewer I can't figure out what might be wrong on iOS. Its showing width of the dropdown in default state of combobox. One clue might be that it doesn't show any content on iOS without "WidthRequest".

Android/iOS screens and source code.
I am using 19.1.0.69 version of nugets.

Attachment: SfComboBoxWidthIssue_bc55b6a8.zip

[David Ziak]

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Black" Padding="0,40,0,0"><Grid.RowDefinitions><RowDefinition Height="*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Padding="10,10,0,0" VerticalOptions="Start"><Grid.RowDefinitions><RowDefinition Height="*"/></Grid.RowDefinitions>
<!-- s - settings --><Label Text="Settings" FontSize="25" HorizontalOptions="Start" TextColor="White" VerticalOptions="CenterAndExpand" />
</Grid>
<!--Combo with languages--><Grid Grid.Row="0" Grid.Column="1" VerticalOptions="Start" HorizontalOptions="End"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>
<syncfusion_combo:SfComboBox Margin="0,4,0,0" DisplayMemberPath="{Binding Name}" DropDownBackgroundColor="White" TextColor="Black" DropDownTextColor="Blue" ImageMemberPath="{Binding Flag}" VerticalOptions="Center" HorizontalOptions="EndAndExpand" DataSource="{Binding Languages}" SelectedItem="{Binding SelectedLanguage, Mode=TwoWay}" ShowBorder="False" WidthRequest="200" HeightRequest="40" MultiSelectMode="None" SelectedDropDownItemColor="#00c8df" IsEditableMode="false" ShowClearButton="False" SelectionChanged="SfComboBox_SelectionChanged" DropDownWidth="200">
<syncfusion_combo:SfComboBox.CustomView><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Image x:Name="Flag" HeightRequest="30" HorizontalOptions="End"/></Grid></syncfusion_combo:SfComboBox.CustomView>
<syncfusion_combo:SfComboBox.ItemTemplate><DataTemplate><Grid><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="Auto" /></Grid.RowDefinitions>
<Label Grid.ColumnSpan="1" Margin="4,4,0,4" Text="{Binding Name}" /><Image Grid.Column="1" Margin="0,0,4,0" Source="{Binding Flag}" MinimumWidthRequest="25" WidthRequest="40" HorizontalOptions="EndAndExpand" />
</Grid></DataTemplate></syncfusion_combo:SfComboBox.ItemTemplate></syncfusion_combo:SfComboBox></Grid>
</Grid>

[Jeya Kasipandi]

Hi David Ziak,

 

Greetings from Syncfusion.

 

We have validated your query and we would like to inform you that when we are adding combo box without width request inside the grid it takes the default size(small size) in iOS. This is the default behavior of combo box. If you want to change width of a combo box based on image size means we suggest you set combo box width manually based on image size.

Please let us know if you have any concern.

Regards,

Jeya K

  

  

[David Ziak]

Hello,

   thank you for checking it. I was able to find workaround for this. White box was from SfComboBox.CustomView. I had to set the same background color as content page background.

<syncfusion_combo:SfComboBox.CustomView>

   <Grid BackgroundColor="Black">

       <Grid.ColumnDefinitions>

           <ColumnDefinition Width="*"/>

       </Grid.ColumnDefinitions>

           <Image x:Name="Flag" HeightRequest="30" HorizontalOptions="End"/>

    </Grid>

</syncfusion_combo:SfComboBox.CustomView>

I set width request to size of the image but this created another issue. DropdownBox was shown outside of the screen.



So I had to set it back to at least DropDownWidth value, which is 200.

[Jeya Kasipandi]

Hi David Ziak,

Thanks for the update.

We have validated your query and we would like to inform you that the dropdown position begins when the combobox control position begins. When we provide the dropdown width is greater than the control width , the dropdown boundaries appear outside of the control width.

Meanwhile, we suggest you use your workaround to resolve the issue.

Please let us know if you have any concern.

Regards,
Jeya K