Abstand und vertikale Ausrichtung: Feinabstimmung der Textplatzierung in Eingabefeldern und Textbereichen

Was ist in 4D 21 R5 möglich?

Die folgende Animation zeigt, was Sie durch die Kombination von vertikaler Ausrichtung und Abständen bei einem Eingabeobjekt erreichen können.

Vertikale Ausrichtung

Die Eigenschaft „Vertical Alignment“ ist nun in der Eigenschaftsliste des Formular-Editors für Textbereichs- und Eingabeobjekte verfügbar und bietet vier Werte: „default“, „top“, „middle“ und „bottom“. Bei der Standardeinstellung „default“ bleibt die Darstellung im Vergleich zu vor Einführung dieser Funktion unverändert, sodass sich für bestehende Formulare nichts ändert, sofern Sie diese Funktion nicht explizit aktivieren.

Sie können die Ausrichtung auch programmgesteuert mit dem bestehenden Befehl `OBJECT SET VERTICAL ALIGNMENT ` festlegen, dessen Wirkungsbereich nun auf diese beiden Objekte erweitert wurde:

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

Abstand

In der Eigenschaftenliste des Formular-Editors stehen für Textbereichs- und Eingabeobjekte vier neue Eigenschaften zur Abstandsausrichtung zur Verfügung: „Left padding“, „Right padding“, „Top padding“ und „Bottom padding“

Neben diesen Eigenschaften ermöglichen zwei neue Befehle die präzise Steuerung der internen Abstände: „ OBJECT SET PADDING“ und „OBJECT GET PADDING “. Beide nehmen ein Objekt mitden Attributen„top“,„bottom“,„left“ und„right“entgegen (bzw. geben es zurück), ausgedrückt in Pixeln:

// Objektbasierter Abstand „
“
OBJECT SET PADDING(*; „txtInput“; {top: 8; right: 12; bottom: 10; left: 5})
$resolvedPadding :=OBJECT GET PADDING(*; „txtInput“)
// Sie können nur die benötigten Abstandsattribute angeben; weggelassene Attribute werden standardmäßig auf 0 gesetzt
OBJECT SET PADDING (*; "txtInput"; {top: 8; bottom: 10})

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

⚠️Hinweis: Diese Befehle funktionieren auch mit Listenfeld-Objekten: Es werden nur „top“ und „left“ berücksichtigt, und beide Werte werden symmetrisch angewendet („top“ sowohl oben als auch unten, „left“ sowohl links als auch rechts).

Ein einheitliches Verhalten, unabhängig vom Einstiegspunkt

Unabhängig davon, wie Sie die Ausrichtung und den Abstand konfigurieren (Formular-Editor, Formular-JSON/Objekteigenschaft, CSS oder 4D-Befehle), ist das gerenderte Ergebnis immer dasselbe. Neben den 4D-spezifischen Schlüsseln werden auch Standard-CSS-Eigenschaftsnamen unterstützt:

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

Ausrichtung und Abstand bleiben auch dann korrekt, wenn Objekte ihre Größe ändern: Im Formular-Editor wird die Ausrichtung eines Objekts bei einer Größenänderung automatisch neu berechnet; zur Laufzeit behalten Objekte mit dynamischer Größenanpassung den Abstand bei und berechnen die Ausrichtung neu, während sie ihre Größe ändern.

Fazit

Mit diesen neuen Steuerelementen haben Sie mehr Freiheit, jedes Formular genau nach Ihren Vorstellungen zu gestalten. Sie können nun:

• Für Objekte vom Typ „Statischer Text“ und „Texteingabe“ die vertikale Ausrichtung „Oben“, „Mitte“, „Unten“ oder „Standard“ wählen.
• Unabhängige Abstände oben, unten, links und rechts festlegen.
• den Formular-Editor, Formular-JSON, CSS oder 4D-Befehle verwenden, je nachdem, wie Sie Ihre Formulare am liebsten erstellen.

Und auch Ihre bestehenden Formulare sind in guten Händen: Wenn sie diese Eigenschaften nicht verwenden, werden sie weiterhin genau wie bisher dargestellt.

Um sich noch intensiver mit diesem Thema zu beschäftigen, werfen Sie einen Blick in die 4D-Dokumentation oder besuchen Sie das 4D-Forum, falls Sie Fragen haben.