What Changed
In previous versions, our ComboBox, Date Edit, and Time Edit components render drop-down items in the DOM tree at the position of the component's parent element. For example, the ComboBox in the parent <div> tag generates the following HTML markup:
HTML<body>
...
<!-- ComboBox render -->
<div class="dxbs-dropdown-edit dxbs-combobox cw-480">
<!-- DropDown render -->
<div class="dx-dropdown-list-container"></div>
</div>
...
</body>
In v21.2, ComboBox, Date Edit, and Time Edit use 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 ComboBox render -->
<dxbl-combobox>
</dxbl-combobox>
</div>
...
<!-- DropDown render -->
<dxbl-dropdown>
</dxbl-dropdown>
...
</body>
Reasons for Change
Previously, specific CSS properties applied to the parent element of the ComboBox, Date Edit, or Time Edit 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>
<DxComboBox DropDownBodyCssClass="my-style" Data="@Cities" @bind-Value="@Value" />