What Changed
In previous versions, the Popup was rendered in the DOM tree at the position that you specified in code.
HTML<body>
<main>
<div class="modal dxbs-modal">
...
</div>
<main>
</body>
In v21.1, the Popup always renders directly in the document body.
HTML<body>
<main>
...
<main>
<dxbl-popup-root>
...
<dxbl-modal>
...
</dxbl-modal>
...
</dxbl-popup-root>
</body>
Reasons for Change
Previously, specific CSS properties applied to the Popup's parent element might clip or corrupt the Popup's content (for instance, if users set the overflow property to hidden or scroll). We decided to render the Popup directly in the document body to avoid any side effects.
Impact on Existing Apps
This change affects applications with the Popup component if you apply a CSS selector that relies on the Popup position in the DOM tree.
CSS.mycustomclass .modal-content h1 {
background-color: red;
}
Razor<body>
...
<div>
...
<div class="mycustomclass">
<DxPopup ...>
...
</DxPopup>
</div>
</div>
</body>
How to Update Existing Apps
Update CSS selectors to take into account the new Popup position in the DOM tree. In specific cases, you can assign a CSS class to the Popup's CssClass property,
CSS.mycustomclass h1 {
background-color: red;
}
Razor<DxPopup HeaderText="Header"
@bind-Visible="PopupVisible"
CssClass="mycustomclass">
<h1>
My Custom Content
</h1>
</DxPopup>