BuyLog In
Breaking Change T999158
Visible to All Users

Changed alignment of data editors in CSS containers

What Changed

Editors are now aligned in CSS flex containers and grid in accordance with the CSS align-items property value.

Reasons for Change

In previous versions, editors with a drop-down ComboBox, Date Edit, TagBox, and Time Edit were shown to the left or to the top of a flex container regardless of the CSS align-items property value. In the following code, the alignment is incorrect: the align-items property is set to center, but the Time Edit is displayed in the left corner of the container:

Razor
<div style="display: flex; flex-direction: column; align-items: center; width: 500px; background-color: #f9cd9d;">
    <DxTimeEdit CssClass="w-50" Time="DateTime.Today"></DxTimeEdit>
</div>

flex-start.png

In v21.1, this behavior was corrected. Now, the same code aligns the editor correctly.

center.png

Impact on Existing Apps

This change impacts your application if you used the align-items property in flex containers and grid. Now, the editors are aligned according to this property.

How to Revert to Previous Behavior

Set the align-items property to flex-start.

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.