Badge Boundary

0 Answers 9 Views
Badge
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
Joel asked on 10 Feb 2026, 05:02 PM | edited on 10 Feb 2026, 05:03 PM
Any ideas on how I can get the Badge to pop beyond the constraints of its host/parent?  Or, can I put the badge to the upper-middle left so it fits better inside the container?




        <TelerikAppBar Class="gsi-background-color">
            <AppBarSection>
                <NavLink href="@ProfileService.HomeUrl" class="gsi-navlink gsi-padding-10 gsi-padding-10-top-bottom">
                    Home
                </NavLink>
            </AppBarSection>

            <AppBarSection>
                <NavLink href="@AboutUrl" class="gsi-navlink gsi-padding-10 gsi-padding-10-top-bottom">
                    About
                </NavLink>
            </AppBarSection>

            <AppBarSpacer />

            <AppBarSection>
                <div class="input-group">

                    @if (ProfileService.IsNotNull())
                    {
                        if (ProfileService.IsInRole(SecurityRoles.Admin, Direction.Up))
                        {
                            <TelerikButton OnClick="OnRouteToNotifications" Class="gsi-button-icon-32">
                                <img src="/images/32/Nofications.white.32x32.png" height="32" width="32" />
                                @if (MessageCount > 0)
                                {
                                    <TelerikBadge VerticalAlign="@BadgeVerticalAlign.Top"
                                                  Class="gsi-background-color-darkgray gsi-color-white">
                                        @MessageCount
                                    </TelerikBadge>
                                }
                            </TelerikButton>

                            <TelerikButton OnClick="@OnRouteToProfile" Class="gsi-button-icon-32">
                                <img src="/images/32/PersonV2.png" height="32" width="32" />
                            </TelerikButton>

                            <NavLink href="@UserDetailsUrl" class="gsi-navlink gsi-padding-10-top-bottom gsi-cursor-pointer">
                                @UserDisplayName
                            </NavLink>

No answers yet. Maybe you can help?

Tags
Badge
Asked by
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
Share this question
or