What Changed
In previous versions, our TagBox component renders drop-down items in the DOM tree at the position of the component's parent element:
HTML<body>
...
<!-- TagBox render -->
<div class="dx-blazor-tagbox">
<!-- DropDown render -->
<div class="dx-dropdown-list-container"></div>
</div>
...
</body>
In v21.2.5, TagBox uses the DevExpress DropDown component for Blazor to show drop-down items. Due to this change, drop-down items are rendered in the document body as follows:
HTML<body>
<div>
<!-- new TagBox render -->
<dxbl-tagbox>
</dxbl-tagbox>
</div>
...
<!-- DropDown render -->
<dxbl-dropdown>
</dxbl-dropdown>
...
</body>
Reasons for Change
Previously, specific CSS properties applied to the parent element of the TagBox might clip or corrupt the drop-down's content (for instance, if users set the overflow property to hidden or scroll). We changed the component's rendering to avoid such side effects.
Impact on Existing Apps
This change affects applications with editors that use drop-down functionality if you apply a CSS selector that relies on their position in the DOM tree.
How to Update Existing Apps
Update CSS selectors to take into account the new position of drop-down items in the DOM tree. You can also use the DropDownCssClass and DropDownBodyCssClass properties for the corresponding editor in the following way:
Razor<style>
.my-style {
background-color: blue;
}
</style>
<DxTagBox DropDownBodyCssClass="my-style" Data="@Cities" @bind-Value="@Value" />