# Doc

Responivness

---

### 1. Architecture Générale

#### 1.1 Structure HTML Standard

Structure hiérarchique :

Form  
└── presentation-grid (container grid)  
 └── grid-field  
 ├── grid-label  
 └── grid-input

---

#### 1.2 Exemple HTML – Formulaire 4 lignes

<div class="presentation-grid" grid style="--rows: 4">

 <div class="grid-field">  
 <div class="grid-label">  
 <Tsi-Label class="col-4"   
 \[labelValue\]="'valeursGerees\_opcvm\_libelle'">  
 </Tsi-Label>  
 </div>  
 <div class="grid-input">  
 <Tsi-Text-Box \[(inputField)\]="opcvm.libelle"></Tsi-Text-Box>  
 </div>  
 </div>

 <div class="grid-field">  
 <div class="grid-label">  
 <Tsi-Label class="col-4"   
 \[labelValue\]="'valeursGerees\_opcvm\_capitalInitial'">  
 </Tsi-Label>  
 </div>  
 <div class="grid-input">  
 <Tsi-Decimal-Input \[(inputField)\]="opcvm.capitalInitial"></Tsi-Decimal-Input>  
 </div>  
 </div>

 <div class="grid-field">  
 <div class="grid-label">  
 <Tsi-Label class="col-4"   
 \[labelValue\]="'valeursGerees\_opcvm\_dateAgrement'">  
 </Tsi-Label>  
 </div>  
 <div class="grid-input">  
 <Tsi-Date-Picker \[(inputField)\]="opcvm.dateAgrement"></Tsi-Date-Picker>  
 </div>  
 </div>

 <div class="grid-field">  
 <div class="grid-label">  
 <Tsi-Label class="col-4"   
 \[labelValue\]="'valeursGerees\_opcvm\_devise'">  
 </Tsi-Label>  
 </div>  
 <div class="grid-input">  
 <Tsi-Search-Combo   
 \[(bind)\]="opcvm.devise"  
 id-field="uid"  
 label-field="libelle">  
 </Tsi-Search-Combo>  
 </div>  
 </div>

</div>

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk--3"></div><div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk--4"></div><div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk--5"></div><div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk--6"></div>---

### 2. Système Grid

##### 2.1 Container principal

**Classe utilisée :**

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-.simple-form"><div class="sticky top-[calc(var(--sticky-padding-top)+9*var(--spacing))]"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">`.simple-form`</div></div>**Rôle :**

- Définit le conteneur principal du formulaire
- Gère l’espacement général
- Applique le style global du bloc

---

##### 2.2 Configuration du Grid

**Classe utilisée :**

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-.presentation-grid"><div class="sticky top-[calc(var(--sticky-padding-top)+9*var(--spacing))]"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">`.presentation-grid`</div></div>Cette classe active le système de mise en page basé sur **CSS Grid**.

**Rôle :**

- Une organisation automatique des champs
- Une gestion dynamique du nombre de lignes
- Une adaptation selon la taille d’écran
- Une optimisation intelligente de l’espace

---

##### 2.3 Explication des propriétés utilisées

##### 2.3.a `display: grid`

Active le système CSS Grid pour organiser les champs sous forme de colonnes et lignes.

---

##### 2.3.b Gestion dynamique des lignes

Le nombre de lignes est défini dynamiquement via une variable CSS :

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-style%3D%22--rows%3A-4%22"><div class="overflow-y-auto p-4" dir="ltr">`<span class="hljs-attr">style</span>=<span class="hljs-string">"--rows: 4"</span>`</div></div>**Rôle :**

- D’adapter facilement la structure
- D’éviter de modifier le CSS principal
- De rendre le système flexible et réutilisable

---

##### 2.3.c Flux automatique optimisé

Le système :

- Remplit verticalement les lignes
- Passe automatiquement à la colonne suivante
- Optimise les espaces vides

Cela garantit une distribution intelligente des champs.

---

##### 2.3.d Colonnes adaptatives

Le système :

- Définit une largeur minimale pour éviter l’écrasement
- Permet aux colonnes de s’étendre selon l’espace disponible
- Maintient une mise en page équilibrée

---

##### 2.3.e Espacement uniforme

Un espacement homogène est appliqué :

- Horizontalement
- Verticalement

Cela améliore la lisibilité et l’esthétique.

---

#### 3. Structure d’un Champ

**Classes utilisées :**

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-.grid-field-%3A-conten"><div class="overflow-y-auto p-4" dir="ltr">`.grid-field : Conteneur vertical d’un champ (Label + Input).grid-label : Affichage du titre du champ.grid-<span class="hljs-keyword">input : Contient le composant (TextBox, DatePicker, Combo, etc.)</span>`</div></div>**Rôle :**

- Une cohérence visuelle
- Une maintenabilité
- Une standardisation des formulaires

---

#### 4. Responsiveness

Le comportement change automatiquement selon la largeur d’écran.

---

##### 4.1 Mobile

Comportement :

- Une seule colonne
- Champs empilés verticalement
- Lecture optimisée pour petit écran

---

##### 4.2 Tablet

Comportement :

- Deux colonnes
- Distribution équilibrée
- Bon compromis entre lisibilité et densité

---

##### 4.3 Desktop

Comportement :

- Trois colonnes
- Optimisation de l’espace large écran
- Mise en page professionnelle

---

#### 5. Extension Standard

**Champ pleine largeur**

Classe utilisée :

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-.grid-field.full-wid"><div class="overflow-y-auto p-4" dir="ltr">`.grid-field.full-width`</div></div>**Rôle :**

- Le champ occupe toutes les colonnes disponibles
- Idéal pour :
    
    
    - Textarea
    - Notes
    - Champs importants

---

#### 6. Résumé Technique

✔ Nombre de lignes dynamique via variable CSS  
✔ Colonnes adaptatives selon largeur écran

<div class="flex flex-col text-sm pb-25" id="bkmrk-7.-exemple-id%C3%A9al-pou"><article class="text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&:has([data-writing-block])>*]:pointer-events-auto scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]" data-scroll-anchor="true" data-testid="conversation-turn-12" data-turn="assistant" data-turn-id="request-WEB:03ed5272-f4ce-40e3-970f-5efc99ef149e-5" dir="auto" tabindex="-1">#### 7. Exemple idéal pour le suivi dans le code HTML

##### 7.1 Module « Valeurs Gérées » – Écran OPCVM (OPCVMWeb)

- Cas d’un écran contenant un nombre important de champs (environ 29 à 30).

<div class="text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] @w-sm/main:[--thread-content-margin:--spacing(6)] @w-lg/main:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)"><div class="[--thread-content-max-width:40rem] @w-lg/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn" tabindex="-1"><div class="flex max-w-full flex-col grow"><div class="min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&]:mt-1" data-message-author-role="assistant" data-message-id="74675b21-f309-4cf4-bdc0-5672133eef15" data-message-model-slug="gpt-5-2" dir="auto"><div class="flex w-full flex-col gap-1 empty:hidden first:pt-[1px]"><div class="markdown prose dark:prose-invert w-full wrap-break-word light markdown-new-styling">---

</div></div></div></div></div></div>##### 7.2 Module « Paramétrages » – Écran Année (OPCVMWeb)

- Cas d’un écran contenant un nombre réduit de champs (environ 3 à 4).

</article></div>