Espacement et alignement vertical : ajuster avec précision le positionnement du texte dans les champs de saisie et les zones de texte

Ce que vous pouvez faire avec 4D 21 R5

L’animation ci-dessous montre ce que vous pouvez réaliser en combinant l’alignement vertical et les marges intérieures sur un objet de saisie.

Alignement vertical

La propriété « Alignement vertical » est désormais disponible dans la liste des propriétés de l’éditeur de formulaires pour les objets Texte statique et Zone de saisie, avec quatre valeurs : par défaut, haut, centre et bas. Si vous conservez la valeur par défaut, le rendu reste inchangé par rapport à la version antérieure à cette fonctionnalité ; rien ne change donc pour les formulaires existants, sauf si vous activez explicitement cette option.

Vous pouvez également définir l’alignement par programmation à l’aide de la commande existante OBJECT SET VERTICAL ALIGNMENT , dont l’impact est désormais étendu aux objets Texte statique et Zone de saisie :

// Alignement vertical
OBJECT SET VERTICAL ALIGNMENT(*; "txtInput"; Align center)
$align:=OBJECT GET VERTICAL ALIGNMENT(*; "txtInput")

Marges intérieures

Quatre nouvelles propriétés de marges sont disponibles dans la liste des propriétés de l’éditeur de formulaire pour les objets Texte statique et Zone de saisie : Marge à gauche, Marge à droite, Marge en haut et Marge en bas

Outre ces propriétés, deux nouvelles commandes vous permettent de contrôler précisément l’espacement interne : OBJECT SET PADDING et OBJECT GET PADDING . Toutes deux acceptent (ou renvoient) un objet doté d’attributs « top » ,« bottom » ,« left » et « right » , exprimés en pixels :

// Marges intérieures basées sur un objet
OBJECT SET PADDING(*; "txtInput"; {top: 8; right: 12; bottom: 10 left: 5})
$resolvedPadding :=OBJECT GET PADDING(*; "txtInput")
// Vous pouvez spécifier uniquement les attributs de marges dont vous avez besoin ; les attributs omis prennent la valeur par défaut 0
OBJECT SET PADDING (*; "txtInput"; {top: 8; bottom: 10})

$resolvedPadding :=OBJECT GET PADDING(*; "txtInput")

⚠️Remarque : ces commandes fonctionnent également avec les objets « List Box »: seules les valeurs « top » et « left » sont prises en compte, et chacune est appliquée de manière symétrique (top à la fois en haut et en bas, left à la fois à gauche et à droite).

Un comportement cohérent, quel que soit le point d’entrée

Quelle que soit la manière dont vous configurez l’alignement et les marges intérieures (éditeur de formulaire, propriété JSON/objet du formulaire, CSS ou commandes 4D), le résultat affiché est le même. Les noms de propriétés CSS standard sont pris en charge en plus des clés spécifiques à 4D :

#txtInput {
vertical-align: middle;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
}

L’alignement et les marges intérieures restent également corrects lorsque les objets changent de taille : dans l’éditeur de formulaire, le redimensionnement d’un objet recalcule automatiquement son alignement ; lors de l’exécution, les objets dont la taille augmente conservent des marges intérieures cohérentes et recalculent leur alignement au fur et à mesure qu’ils changent de taille.

Conclusion

Grâce à ces nouveaux contrôles, vous disposez d’une plus grande liberté pour personnaliser chaque formulaire à votre guise. Vous pouvez désormais :

• Choisir un alignement vertical en haut, au centre, en bas ou par défaut pour les objets Texte statique et Zone de saisie.
• Ajouter des marges intérieures indépendantes en haut, en bas, à gauche et à droite.
• Utiliser l’éditeur de formulaires, le formulaire JSON, le CSS ou les commandes 4D, selon la méthode que vous préférez pour créer vos formulaires.

Et vos formulaires existants sont également entre de bonnes mains : lorsqu’ils n’utilisent pas ces propriétés, ils continuent de s’afficher exactement comme auparavant.

Pour avoir encore plus d’informations sur ce sujet, consultez la documentation 4D ou rendez-vous sur le forum 4D si vous avez des questions.