DxTabs - The markup of the tab content area has been changed

What Changed

In previous versions, the active tab content was rendered next to DxTabs' <nav> element.

HTML
<nav />
<!-- active tab content -->

In v21.1, the active tab content is wrapped into additional <div> elements.

HTML
<nav />
<div>
   <div>
      <!-- active tab content -->
   </div>
</div>

Reasons for Change

In v21.1, we have implemented a new DxTabs.RenderMode property that specifies how the DxTabs component renders tab content. Tab content is now wrapped into additional <div> container. This container is hidden or shown according to CSS rules that depend on the tab's state.

Impact on Existing Apps

This change may affect your applications if you apply a CSS selector that relies on the position of the active tab content in the DOM tree.

CSS
.my-container > .my-content {
    background-color: red;
}

HTML
<div class="my-container">
   <DxTabs>
      <DxTabPage>
         <div class="my-content" />
      </DxTabPage>
   </DxTabs>   
</div>

How to Update Existing Apps

Update CSS selectors to take a new position of the active tab content in the DOM tree into account.

CSS
.my-container .my-content {
    background-color: red;
}

If you need to select .my-content as a direct child, modify your code in the following way:

CSS
.my-container > div > div > .my-content {
    background-color: red;
}