/. Elle a été retirée le
29/07/2026 : le défilement virtuel de DxGrid calcule l'étendue de défilement et la position
de chaque ligne à partir de SA PROPRE notion de hauteur de ligne, celle que lui donnent ses
variables CSS internes — pas celle réellement rendue. Forcer la hauteur ici changeait donc
l'affichage sans que le moteur le sache. Mesuré : zone de défilement annonçant 241px de
contenu pour 11 365 lignes, lignes rendues avec leurs données mais positionnées à top:-546px
(hors écran), classe `dxbl-skeleton-animate` jamais retirée → placeholders gris permanents
sur toutes les vues liste.
La densité vient de l'API du composant : le SizeMode de l'utilisateur (Compact par défaut,
Startup, GlobalOptions ; le thème Fluent définit alors --dxbl-grid-text-height ≈ 16px et
les marges des cellules) + TextWrapEnabled = false (hauteur de ligne uniforme, requise par
le moteur ; Controllers/Shared/CustomListViewController.cs). Pour ajuster la densité, c'est
le SizeMode — pas ici : plus aucune hauteur, marge, police ni taille d'icône n'est forcée
dans une grille depuis le 26/10/2026 (lot 3 de la charte). */
/* Cellules « valeur modifiée » (mode batch-edit) : XAF pose en inline
`background-color: var(--fluent-primary-transparent-bg, var(--bs-primary-transparent-bg)) !important`.
Le défaut Bootstrap = color-mix(15% primary, white) -> teal pâle perçu bleu.
Impossible de battre un !important inline par une règle classique : on
redéfinit donc la variable SUR la cellule -> le var() inline résout en la couleur de sa
ligne (blanche ou zébrée ; pas transparente : une cellule figée laisserait voir le contenu
qui défile dessous). Scopé à .xaf-grid-modified-value : n'affecte aucun autre usage. */
.dxbl-grid td.xaf-grid-modified-value,
dxbl-tree-list.dxbl-grid td.xaf-grid-modified-value {
--fluent-primary-transparent-bg: var(--dxbl-grid-row-bg);
--bs-primary-transparent-bg: var(--dxbl-grid-row-bg);
}
/* Calendriers de tournées (classe posée par RoundCalendarGrid.LockToDataSourceOrder) :
lignes fixes Lundi→Dimanche, non ouvrables. On masque la colonne de commande inline
« Ouvrir » (action ShowObject, affichée désactivée) : contenu caché + colonne réduite
à 0 pour ne pas laisser de gouttière. La 1re du dessous — mais
aucun éditeur ne s'ouvre à l'arrivée (EditNextCellOnEnter est injoignable en
26.1, voir GridKeyboardEntryController). Sans cadre sur la cellule focalisée,
la saisie au clavier était donc AVEUGLE : rien n'indiquait où l'on se trouvait,
et Entrée semblait ne rien faire. La règle ci-dessus, écrite pour un contour
parasite au CHARGEMENT, emportait aussi ce cadre-là.
Le cadre restitué est celui du thème (core.min.css : `.dxbl-grid
.dxbl-grid-table>tbody>tr>td:focus-visible`, contour de .15rem à
--dxbl-grid-focus-frame-color, l'accent de la charte par charte/ds-pim.css).
Ne réélargis pas ce sélecteur aux `td` sans remettre un indicateur de
cellule focalisée à la place. */
.dxbl-grid:focus-visible,
.dxbl-grid-table:focus-visible,
.dxbl-grid [tabindex]:focus-visible:not(.dxbl-btn):not(input):not(.dxbl-checkbox):not(td) {
outline: none !important;
}
/* ============================================================
17. MODAL / POPUP
XAF Blazor uses DevExpress popup components that render as
.dxbl-modal-* elements. Layout: backdrop → content →
header / body / footer.
============================================================ */
/* !important in this section, measured 26/10/2026 on three windows (Transformer's parameters, a
detail view, a yes / no confirmation), each one stripped in turn: those left are the ones the
theme's own rules — more specific, or !important themselves — would otherwise win. The others
were removed, and the declarations that changed nothing at all with them. */
/* Backdrop: XAF renders it with the Bootstrap class, which no Fluent rule paints from the theme's backdrop token;
that token is the charter's Teal at 40 % (charte/ds-pim.css, the bridge). */
.modal-backdrop {
background-color: var(--dxds-color-surface-backdrop-default-rest);
backdrop-filter: blur(2px);
}
/* Sizing — NOT here: a pop-up window takes one of the three sizes of the charter's Modal
(s / m / l) through the native way, Controllers/Shared/PopupWindowSizeController (26/10/2026,
design/CHARTE.md § 5.10); until 26/10/2026, this section stretched every pop-up over the whole
content area. Centering: the theme's. */
.dxbl-modal,
.dxbl-window-root {
align-items: center;
justify-content: center;
}
/* The pop-up's look: the charter's Modal surface, overflow hidden, so that header and footer stay
put while the body (.dxbl-modal-body) scrolls (the theme lays it out as a flex column). Its size
and place: see above. min-height: 0 lets it shrink to the window's height cap (below), the body
scrolling instead. !important: the theme paints the content from more specific rules. */
.dxbl-modal-content {
background-color: var(--ds-modal-bg) !important;
border: 1px solid var(--ds-modal-border) !important;
border-radius: var(--ds-card-radius) !important;
overflow: hidden !important;
/* fills a window of fixed height (a list: its grid needs the bounded height), shrinks to a capped one */
flex: 1 1 auto;
min-height: 0;
}
/* The direct PARENT of .dxbl-modal-content (its class depends on the kind of XAF pop-up) carries the
window's size (PopupWindowSizeController: width, height, max-height): a flex column, so that the
content keeps within the height cap of a tall form and its buttons stay on screen. It also carries
the theme's shadow, which the charter's Modal does not have (!important: the theme sets it from a
more specific rule). Scoped by :has(> .dxbl-modal-content): drop-downs and tooltips are not touched. */
*:has(> .dxbl-modal-content) {
display: flex;
flex-direction: column;
box-shadow: none !important;
}
/* Message dialogs (error, information, yes / no confirmation) show no view, only a text and one or
two buttons: a fixed narrow width, whatever the length of the message, and a height from the
content, capped (the body scrolls, the buttons stay visible). Two families:
- .dxbl-message-box > .dxbl-modal-content: DxMessageBox;
- .dxbl-modal-content with no XAF view inside: XAF's IExceptionDialogTemplate /
IConfirmationDialogTemplate carry no class of their own; they are told by the absence of any
editable element of a view (grid, tabs, form layout, input, textarea, text editor).
Not the piece confirmations (.confirm-panel): a view, sized Small by PopupWindowSizeController, whose
content fills its window. Specificity (0,2,0) > the .dxbl-modal-content rule (0,1,0). */
.dxbl-message-box > .dxbl-modal-content,
.dxbl-modal-content:not(:has(.dxbl-grid, .dxbl-form-layout, .dxbl-tabs, input, textarea, .dxbl-text-edit, .confirm-panel)) {
width: min(480px, 90vw) !important;
height: auto;
max-height: 70vh !important;
/* Centred in its window, which may be wider (the content's width is set here, the window's elsewhere). */
align-self: center;
}
/* La fenêtre de CONFLIT D'ENREGISTREMENT (PIM-330) n'a pas de champ de saisie : la règle ci-dessus la
réduisait à 480 px, son texte (qui a modifié quoi, les deux valeurs) devenait illisible et ses
boutons se repliaient en icônes. Elle est reconnue à la classe que portent ses actions
(CustomCSSClassName="pim-conflict-dialog" sur IgnoreCollisionAction, ReloadCollisionAction,
MergeAction et RefreshAction dans Model.xafml), comme le popup des notifications plus bas. Les
attributs data-action-id / data-action-name visés jusqu'au 13/10/2026 ne sont pas posés par XAF
dans ce dialogue : la règle ne s'appliquait jamais (vu par l'E2E ConcurrencyConflictTests).
Classe doublée : spécificité (0,3,0) > (0,2,0) de la règle des messages, sans dépendre de l'ordre. */
.dxbl-modal-content.dxbl-modal-content:has(.pim-conflict-dialog) {
width: min(760px, 92vw) !important;
max-height: 80vh !important;
/* Centred even when wider than its window (the theme's default 500 px), flex lets it overflow both sides. */
align-self: center;
}
/* EXCEPTION aux tailles de la charte : le popup des NOTIFICATIONS. Il contient une grille, donc il
prendrait la grande taille (liste) pour trois lignes — une immense boîte vide. On le veut petit,
posé en haut à droite de l'écran (d'où sa position fixe, la seule du § 17).
Il est reconnu à la classe portée par son action « Ouvrir l'entité » (NavigateToLinkedEntity,
CustomCSSClassName dans Model.xafml) : aucun autre popup ne la contient, donc aucun autre
popup n'est touché par cette règle.
Hauteur FIXE, surtout pas auto : la vue liste tourne en défilement virtuel, et une grille dont
la hauteur n'est pas bornée lève UnableToRequestItemsException. 420px = ~8 notifications
visibles, au-delà la grille défile.
Spécificité (0,2,0), comme l'exception message-box ci-dessus -> l'emporte sur .dxbl-modal-content. */
.dxbl-modal-content:has(.pim-notifications-popup) {
position: fixed !important;
top: 16px !important;
bottom: auto !important;
left: auto !important;
right: 16px !important;
transform: none !important;
width: min(420px, 92vw) !important;
height: min(320px, 60vh) !important;
max-height: 60vh !important;
}
/* NB : rendre ce popup NON BLOQUANT n'est pas faisable ici. Testé : neutraliser l'overlay
(pointer-events + voile) laisse passer les clics visuellement, mais XAF garde la Frame du popup
active et aucune action n'aboutit derrière. La fenêtre de notifications XAF est modale par
conception. Pour du non-bloquant il faut sortir du popup XAF (cloche + volet latéral en
composant Blazor autonome) — ne pas retenter la piste CSS. */
/* Header. !important: the theme's header padding and border come from more specific rules. */
.dxbl-modal-header,
dxbl-popup-header.dxbl-modal-header {
background-color: var(--ds-modal-bg) !important;
border-bottom: 1px solid var(--ds-modal-border) !important;
padding: 15px 20px !important;
min-height: 56px;
}
.dxbl-modal-header-default {
gap: 8px;
min-height: 20px;
}
/* Title: the view's caption (a list or a non-persistent view, .xaf-view-caption-lg) or the object's.
!important on size and line height: XAF sizes a message's caption from a more specific rule. */
.dxbl-modal-header .xaf-view-caption-lg,
.dxbl-modal-header .xaf-object-caption,
dxbl-popup-header .xaf-object-caption {
/* text/14/semibold: the title of the charter's Modal (6288-23319, WMS window 4090-57511) */
font-size: var(--ds-font-size-14) !important;
font-weight: var(--ds-font-weight-semibold);
color: var(--ds-modal-content);
line-height: 1.4 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Close button: the charter's Teal cross, in a 28 px square (the theme's layout and transparency). */
button.dxbl-popup-header-button {
border: none;
color: var(--ds-modal-content);
min-width: 28px;
min-height: 28px;
flex-shrink: 0;
}
/* Body. !important on the padding: the theme's comes from a more specific rule. */
.dxbl-modal-body {
padding: 15px 20px !important;
background-color: var(--ds-modal-body-bg);
overflow: auto;
flex: 1 1 auto;
}
/* A message's text at 14 px, keeping its line breaks. !important: XAF's message text (size,
white-space) comes from more specific rules. Not the labels: a field's caption keeps the size of
the user's density, as on a page (CHARTE.md § 5.1, 12 px in Compact) - a « label » selector here
had fixed them at 14 px, found by the catalogue references on 2026-10-28. */
.dxbl-modal-body .xaf-static-text {
font-size: 14px !important;
font-weight: 400;
color: var(--ds-modal-content);
line-height: 1.5 !important;
white-space: pre-line !important;
}
/* Footer. !important: the theme's footer padding, border and surface come from more specific rules. */
.dxbl-modal-footer {
padding: 16px 24px !important;
min-height: 68px;
border-top: 1px solid var(--ds-modal-border) !important;
background-color: var(--ds-modal-bg) !important;
}
/* Toolbar root inside footer: the full width, for the buttons' alignment (!important: the
theme's toolbar sets its own min-width). */
.dxbl-modal-footer .dxbl-toolbar,
.dxbl-modal-footer dxbl-toolbar {
min-width: 100% !important;
min-height: 36px;
}
/* ============================================================
18. DETAIL VIEW — Object forms (XAF FormLayout)
Scoped to .main.main-object-model and .detail-view-content
to avoid touching grid cell editors and modal editors.
Verified DOM structure (provided HTML):
.dxbl-group
.dxbl-group-header > .dxbl-text
.dxbl-group-body.dxbl-fl-group-body
.dxbl-group-body-content
.dxbl-fl-item
.dxbl-fl-cpt ← field label
.dxbl-fl-ctrl
.dxbl-text-edit ← editor root
.dxbl-text-edit-input ← actual