Button Badge z-index problem

[AP]

I have some buttons on a page, which when required, show badges containing a number. The code is:-

@(Html.Kendo().Button().Name("reviewButton").Content("Review").Badge(b => b.Value((string)ViewBag.NoToReview).Type("error").Visible((bool)ViewBag.ReviewBadge)).HtmlAttributes(new {style= "margin-right:10px;width:150px;margin-bottom:2px;" ,@class="k-primary"}).Events(e=>e.Click("review")))

 

This is fine, however I have a bootstrap 3 drop-down menu at the top of the page, and when it is shown, the button badge appears over the menu, not hidden by it.

How can I stop this happening?

 

[Ivan Danchev]

Hello,

The badge span element has default z-index value of 9999, whereas the Bootstrap dropdown's z-index value is 1000 (I tested it with Bootstrap v3.4.1). So to show the dropdown over the badge, either increase the dropdown's z-index value, or decrease that of the badge, e.g.:

.k-badge-overlay .k-badge {
  z-index: 999;
}

 

Regards,
Ivan Danchev
Progress Telerik