---
ADMIN EDIT
The following should let the multiselect render above the custom yellow element, but it does not. A workaround is available as the second CSS snippet that you can uncomment.
<style>
/*should work but does not*/
.high-zindex {
z-index: 124;/*note how this is higher than the z-index of the div element, and is higher than the default z-index of the component*/
}
/*workaround*/
.k-animation-container {
z-index: 15000;
}
</style>
<div style="position: absolute; z-index: 123; width: 600px; height: 200px; background: yellow;">
<TelerikMultiSelect Data="@Countries"
@bind-Value="@Values"
Placeholder="Enter Balkan country, e.g., Bulgaria"
ClearButton="true" AutoClose="false"
PopupClass="high-zindex">
</TelerikMultiSelect>
</div>
@code {
List<string> Countries { get; set; } = new List<string>();
List<string> Values { get; set; } = new List<string>();
protected override void OnInitialized()
{
Countries.Add("Albania");
Countries.Add("Bosnia & Herzegovina");
Countries.Add("Bulgaria");
Countries.Add("Croatia");
Countries.Add("Kosovo");
Countries.Add("North Macedonia");
Countries.Add("Montenegro");
Countries.Add("Serbia");
Countries.Add("Slovenia");
base.OnInitialized();
}
}
---