[Solved] Badge Boundary

[Joel]

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>

[Dimo]

Hello Joel,

The host/parent of the Badge is the Button, and the Badge already is beyond the Button's boundaries.

If the built-in Badge position options do not meet your requirements, then you can set a custom CSS class to it and move it with margin styles. Keep in mind that the AppBar has an overflow:hidden style, so the Badge will be clipped if you move it up from its current position.

Regards,
Dimo
Progress Telerik

[Joel]

I did not see the Position attribute.  That should do it.