|
|
|
|
|
|
|
|
|
|
- Présentation
- Comment le faire ?
Exemple Flexbox : ancrage proportionnel sur les champs
Le champ Flexbox permet de mettre en place des ancrages proportionnels sur les champs. Avec le champ Flexbox, il est possible de définir une largeur proportionnelle à appliquer champ par champ lorsque la page s'agrandit. Dans l'exemple suivant, un champ Zone répétée contient 4 champs de saisie.
Quand le navigateur est agrandi en largeur, les 2 premières zones de saisie doivent rester en largeur fixe et l'espace supplémentaire doit être distribué ainsi : 20 % pour la 3ème zone (libellé complet), 80 % pour la 4ème zone (descriptif).Â
Ces ancrages peuvent être définis avec un champ Flexbox. Remarque : Cette page est basée sur l'exemple WW_Flexbox. Pour obtenir un ancrage spécifique des champs de saisie composant la ligne d'un champ Zone répétée, vous pouvez : - Créer un champ Flexbox. Ce champ Flexbox est présent dans la ligne du champ Zone répétée et contient les différents champs affichés par le champ Zone répétée. Dans notre exemple, il s'agit de 4 champs de saisie.
- Dans l'onglet "Général" de la fenêtre de description du champ Flexbox, les différents champs sont affichés. Pour obtenir un agrandissement des champs, il suffit de définir l'option "flex-grow" pour le troisième et le quatrième champ. Dans notre cas, nous avons quatre champs de saisie. Les options suivantes doivent être modifiées :
- pour le troisième champ de saisie, l'option "flex-grow" a pour valeur 20.
- pour le quatrième champ de saisie, l'option "flex-grow" a pour valeur 80.
- Dans l'onglet "Détail", aucune modification ne doit être effectuée.
Liste des exemples associés :
|
Exemples didactiques (WEBDEV) : WW_Flexbox
[ + ] Cet exemple présente le champ Flexbox qui détermine le positionnement des champs placés dedans.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|