What Changed
The DevExpress Blazor RichEdit component switched from Bootstrap to a new optimized rendering mechanism. The transition to this new rendering mechanism includes the following changes:
- DevExpress CSS classes now use the ".dxbl" prefix instead of ".dx" (to avoid conflicts with previous styles).
- Multiple DevExpress CSS classes were removed without a direct alternative for the new render.
- All Bootstrap CSS classes were removed.
- Style properties (for example, borders or background colors) now depend on Blazor Themes.
DevExpress Classes
| v23.2 and earlier | v24.1 |
|---|---|
.dx-office-ribbon |
.dxbl-office-ribbon |
.dxbs-ribbon |
No longer used |
.dxbs-ribbon-oneline |
No longer used |
.dxbs-r-loaded |
No longer used |
.dx-office-ribbon-tab |
.dxbl-office-ribbon-tab |
.dx-office-ribbon-context-tab |
.dxbl-office-ribbon-context-tab |
.dx-office-ribbon-tab-content |
.dxbl-office-ribbon-tab-content |
.dx-office-bar-combobox-middle |
.dxbl-office-bar-combobox-medium |
.dx-office-bar-dropdown |
.dxbl-office-bar-dropdown |
.dx-office-bar-dropdown-horizontal |
.dxbl-office-bar-dropdown-horizontal |
.dx-office-bar-dropdown-vertical |
.dxbl-office-bar-dropdown-vertical |
.dx-office-bar-dropdown-horizontal-content |
.dxbl-office-bar-dropdown-horizontal-content |
.dx-office-bar-dropdown-vertical-content |
.dxbl-office-bar-dropdown-vertical-content |
.dx-office-bar-dropdown-horizontal-header |
.dxbl-office-bar-dropdown-header |
.dx-office-bar-dropdown-horizontal-break |
.dxbl-office-bar-dropdown-break |
.dx-office-bar-button |
.dxbl-office-bar-button |
.dx-office-bar-checkablebutton |
.dxbl-office-bar-checkablebutton |
.dx-office-bar-togglebutton |
.dxbl-office-bar-togglebutton |
.dxreContextMenu |
.dxre-context-menu |
Bootstrap Classes
| v23.2 and earlier | v24.1 | |
|---|---|---|
| Root element | card |
No longer used |
| Mobile dialogs | modal-title, modal-header, card-header |
No longer used |
| Quick search panel | modal, modal-content, mb-2 |
No longer used |
| Ribbon | border-bottom |
No longer used |
Reasons for Change
The new rendering mechanism will help us deliver a consistent appearance across DevExpress Blazor UI components. This change with CSS classes allowed us to render the RichEdit component more precisely without using Bootstrap styles and improve the performance of component rendering.
Impact on Existing Apps
This change affects your application in the following cases:
- You used CSS classes and class selectors to customize the RichEdit appearance.
- You customized Bootstrap properties (for example, borders or background colors for some elements).
- You registered the Bootstrap 5 CSS file.
How to Update Existing Apps
Update CSS selectors to take into account new classes of the RichEdit and its items.
If you registered the Bootstrap 5 CSS file for your component, remove .bs5 from the file's URL:
v23.2
HTML<link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.bs5.css" rel="stylesheet" />
v24.1
HTML<link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.css" rel="stylesheet" />