Riempimento e allineamento verticale: regolazione precisa del posizionamento del testo nei campi di immissione e nelle aree di testo

Cosa è possibile fare con 4D 21 R5

L’animazione qui sotto mostra cosa è possibile ottenere combinando l’allineamento verticale e la spaziatura su un oggetto di immissione.

Allineamento verticale

La proprietà Allineamento verticale è ora disponibile nell’elenco delle proprietà dell’Editor dei moduli per gli oggetti Area di testo e Input, con quattro valori: predefinito, in alto, al centro e in basso. Se lasciata al valore predefinito, la visualizzazione rimane invariata rispetto a prima dell’introduzione di questa funzionalità, quindi nulla cambia per i moduli esistenti a meno che non si scelga esplicitamente di attivarla.

È inoltre possibile impostare l’allineamento a livello di programmazione tramite il comando esistente `OBJECT SET VERTICAL ALIGNMENT `, il cui comportamento effettivo è ora esteso a questi due oggetti:

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

Rientro

Nell’elenco delle proprietà dell’Editor dei moduli sono disponibili quattro nuove proprietà di riempimento per gli oggetti Area di testo e Campo di immissione: Riempimento a sinistra, Riempimento a destra, Riempimento in alto e Riempimento in basso

Oltre a queste proprietà, due nuovi comandi consentono di controllare con precisione la spaziatura interna: OBJECT SET PADDING e OBJECT GET PADDING . Entrambi accettano (o restituiscono) un oggetto conattributitop,bottom,left eright, espressi in pixel:

// Margini basati sull’oggetto
OBJECT SET PADDING(*; "txtInput"; {top: 8; right: 12; bottom: 10 left: 5})
$resolvedPadding:=OBJECT GET PADDING(*; "txtInput")
// È possibile specificare solo gli attributi di riempimento necessari; gli attributi omessi assumono il valore predefinito 0
OBJECT SET PADDING (*; "txtInput"; {top: 8; bottom: 10})

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

⚠️Nota: questi comandi funzionano anche con gli oggetti Casella di riepilogo: vengono presi in considerazione solo top e left, e ciascuno viene applicato simmetricamente (top sia in alto che in basso, left sia a sinistra che a destra).

Un comportamento coerente, in ogni punto di accesso

Indipendentemente dal modo in cui si configurano l’allineamento e il riempimento (Form Editor, proprietà JSON/oggetto del modulo, CSS o comandi 4D), il risultato visualizzato è lo stesso. I nomi delle proprietà CSS standard sono supportati insieme alle chiavi specifiche di 4D:

#txtInput {

}

Anche l’allineamento e il padding rimangono corretti quando gli oggetti cambiano dimensione: nell’Editor dei moduli, il ridimensionamento di un oggetto ricalcola automaticamente il suo allineamento; in fase di esecuzione, gli oggetti con ridimensionamento dinamico mantengono il padding coerente e ricalcolano l’allineamento man mano che cambiano dimensione.

Conclusione

Grazie a questi nuovi controlli, hai maggiore libertà per personalizzare ogni modulo in modo ottimale. Ora puoi:

• Scegliere l’allineamento verticale in alto, al centro, in basso o predefinito per gli oggetti ” Testo statico ” e “ Inserimento testo “.
• Aggiungere un padding indipendente in alto, in basso, a sinistra e a destra.
• Utilizzare l’Editor dei moduli, il JSON del modulo, i CSS o i comandi 4D, a seconda del modo in cui preferite costruire i vostri moduli.

E anche i vostri moduli esistenti sono in buone mani: quando non utilizzano queste proprietà, continuano a essere visualizzati esattamente come prima.

Per approfondire ulteriormente l’argomento, consulta la documentazione 4D oppure visita il forum 4D se hai domande.