BuyLog In
Breaking Change T1032759
Visible to All Users

Toolbar - The DropDown rendering has changed

What Changed

In previous versions, our Toolbar component rendered drop-down items in the DOM tree at the position of the component's parent element as follows:

HTML
<body>
  ...
  <!-- Toolbar component -->
  <div class="dxbs-toolbar">
    <!-- Parent toolbar item -->
    <li class="dxbs-toolbar-dropdown-item">
      <!-- Child toolbar item -->
      <button type="button" class="dropdown-item"></button>
    </li>
  </div>
  ...
</body>

In v21.2, the Toolbar uses the following DevExpress components for Blazor to show drop-down items: the Popup component for modal mode and DropDown component for non-modal mode . Due to this change, drop-down items are rendered in the document body as follows:

HTML
<!-- Modal mode -->
<body>
  ...
  <!-- Toolbar component -->
  <div class="dxbs-toolbar">
     <!-- Toolbar parent item -->
    <dxbl-toolbar-menu-item></dxbl-toolbar-menu-item>
  </div>
  ...
  <!-- Popup -->
  <dxbl-popup-root>
    <dxbl-popup-cell>
      <!-- Toolbar child item -->
      <dxbl-toolbar-menu-item></dxbl-toolbar-menu-item>
    </dxbl-popup-cell>
  </dxbl-popup-root>
</body>

<!-- Non-modal mode -->
<body>
  ...
  <!-- Toolbar component -->
  <div class="dxbs-toolbar">
     <!-- Toolbar parent item -->
    <dxbl-toolbar-menu-item></dxbl-toolbar-menu-item>
  </div>
  ...
  <!-- DropDown -->
  <dxbl-dropdown>
    <!-- Toolbar child item -->
    <dxbl-toolbar-menu-item> </dxbl-toolbar-menu-item>
  </dxbl-dropdown>
</body>

Reasons for Change

Previously, specific CSS properties applied to the Toolbar's parent element might clip or corrupt the drop-down's content (for instance, if users set the overflow property to hidden or scroll). We decided to change the component's rendering to avoid such side effects.

Impact on Existing Apps

This change affects applications that contain the Toolbar if you apply a CSS selector that relies on a drop-down item position in the DOM tree.

CSS
.mycustomclass h1 {
    background-color: red;
}
Razor
<div class="mycustomclass">
  <DxToolbar>
    <Items>
      <DxToolbarItem Text="Parent item">
        <Items>
          <DxToolBarItem Text="Drop-Down item">
              <h1>....</h1>
          </DxToolbarItem>
        </Items>
      </DxToolbarItem>
    </Items>
  </DxToolbar>
</div>

How to Update Existing Apps

Update CSS selectors to take into account the new position of drop-down items in the DOM tree. For example, you can use the DropDownCssClass property in the following way:

CSS
.mycustomclass h1 {
    background-color: red;
}
Razor
<div>
  <DxToolbar>
    <Items>
      <DxToolbarItem Text="Parent item">
        <Items>
          <DxToolBarItem Text="Drop-Down item" DropDownCssClass="mycustomclass">
            <h1>....</h1>
          </DxToolbarItem>
        </Items>
      </DxToolbarItem>
    </Items>
  </DxToolbar>
</div>

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.