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

Tabview and Badge icon dimension

Hi,

i've this code:

                    <tabview:SfTabItem.HeaderContent>

                        <StackLayout Orientation="Vertical">

                            <badge:SfBadgeView BadgeText="1">

                                <badge:SfBadgeView.Content>

                                    <Image Aspect="AspectFit" HeightRequest="24" WidthRequest="24" Source="news.png"></Image>

                                </badge:SfBadgeView.Content>

                                <badge:SfBadgeView.BadgeSettings>

                                    <badge:BadgeSetting BadgeType="Error" Offset="-70,3" />

                                </badge:SfBadgeView.BadgeSettings>

                            </badge:SfBadgeView>

                            <Label Text="News" TextColor="#FF00AFF0" FontSize="Caption" VerticalOptions="Center" HorizontalOptions="Center" />

                        </StackLayout>

                    </tabview:SfTabItem.HeaderContent>


if there is no badge in the tab then the icons of the two tabs are of the same size, see fig_1 if instead the badge is active the icon of the second tab drops in height and becomes smaller, see fig_2. How can I avoid this?

Thank you


Attachment: image_8028bcc8.rar

1 Reply

ET Eswaran Thirugnanasambandam Syncfusion Team November 16, 2022 02:27 PM UTC

We checked the provided code snippet, and we would like to inform that, the content size is the size of SfBadgeView container. So, while placing the badgeText with BadgeAlignment as Center or Start, we will arrange the BadgeText and BadgeContent within the container size by decreasing the size of BadgeContent according to BadgeText size and BadgeAlignment. So, only the SfBadgeView behave like this. You can avoid this behavior by setting BadgeAlignment as End. Now we have modified the sample to achieve your requirement and please get it from the below attachment.


Attachment: SfTabViewBadgeView_d0eff12c.zip

Loader.
Live Chat Icon For mobile
Up arrow icon