Sie können die Darstellung und Gestaltung eines adaptiven Formulars durch Angabe einer CSS-Datei oder einer Client-Bibliothek festlegen. Außerdem können Sie Inline-CSS-Stile auf einzelne Komponenten anwenden und die Änderungen direkt in der Vorschau anzeigen.

Anhand des nächsten Bilds einer Textkomponente erklären wir zuerst die verschiedenen Teile einer Komponente im adaptiven Formular, auf die Sie Formatvorlagen anwenden können.

Teile einer Komponente im adaptiven Formular

Folgende Teile einer Komponente im adaptiven Formular sind im Bild oben zu sehen:

A. Beschriftung: Beschriftung für die Komponente

B. Feld: Bereich, der alle Teile der Komponente umfasst

C. Widget: Bereich, in dem der Benutzer einen Wert für das Feld festlegt oder wählt

D. Hilfe: Kurzbeschreibung, Langbeschreibung und Hilfsanzeige für die Komponente

Verwenden von Inline-CSS-Eigenschaften

Hinzufügen von Inline-Stilen zu einer Komponente:

  1. Klicken Sie mit der rechten Maustaste auf eine Komponente im adaptiven Formular und klicken Sie auf Bearbeiten. Das Komponentendialogfeld „Bearbeiten“ wird geöffnet.

  2. Klicken Sie, um die Registerkarte Stil zu öffnen.

    Registerkarte „Stil“ im Dialogfeld „Komponente bearbeiten“
  3. Klicken Sie auf eine Registerkarte im Abschnitt „Inline-CSS-Eigenschaften“, um CSS-Eigenschaften festzulegen. Beispiel:

    1. Klicken Sie auf der Registerkarte „Feld“ auf Element hinzufügen Es wird eine Zeile mit zwei Feldern hinzugefügt.
    2. Geben Sie im ersten Feld von links eine CSS3-Eigenschaft an, die Sie anwenden möchten. Beispielsweise Rahmen. Sie können eine Eigenschaft auch auswählen, indem Sie auf den Pfeil nach unten klicken. Beachten Sie, dass die Dropdownliste nicht vollständig ist und Sie einen beliebigen unterstützten CSS3-Eigenschaftennamen in dieses Feld eingeben können.
    3. Geben Sie im angrenzenden Feld einen gültigen Wert für die angegebene CSS3-Eigenschaft an. Beispielsweise 3px solid black.
    4. Klicken Sie auf Element hinzufügen, um eine andere Eigenschaft und deren Wert anzugeben.
  4. Ebenso können Sie zu anderen Registerkarten wechseln und Stile für Widget, Beschriftung und Hilfe anwenden.

  5. Klicken Sie auf auf OK, um die Änderungen zu bestätigen oder auf Abbrechen, um das Dialogfeld ohne Änderungen zu schließen.

Beispiel: Inline-Stile

Die folgenden Bilder zeigen ein Textfeld, bevor und nachdem Inline-Stile darauf angewendet wurden.

Textfeldkomponente vor der Anwendung von Inline-Stil-Eigenschaften

Beachten Sie die Änderung im Textfeldstil in der folgenden Abbildung, nachdem die folgenden CSS-Eigenschaften angewendet wurden.

Tabulatortaste

CSS-Eigenschaft

Wert

Ergebnis

Feld

border

2px solid black

Erstellt einen schwarzen, 2px breiten Rahmen um das Feld

Widget

background-color

#6495ED

Ändert die Hintergrundfarbe zu Kornblumenblau (#6495ED)

Hinweis: Sie können einen Farbnamen oder seinen Hexadezimalcode im Wertefeld angeben.

Beschriftung

width

100px

Stellt die Breite als 100px für die Beschriftung ein

Hilfe – Fragezeichen

color

green

Ändert die Farbe für die Hilfsanzeige in Grün

Hilfe – Fragezeichen

content

"\e086"

Ändert die Hilfsanzeige von einem Fragezeichen zu einem Bootstrap Glyphicon mit der angegebenen CSS-Regel.
Hinweis: Sie müssen eine CSS-Regel in doppelte Anführungszeichen setzen. Eine Liste der Bootstrap Glyphicons und der entsprechenden CSS-Regeln finden Sie unter Bootstrap 3 Glyphicons-Spickzettel

Hilfe – Langbeschreibung

text-align

center

Richtet die Langbeschreibung für die Hilfe mittig aus

Textfeldkomponente nach der Anwendung der Inline-Stil-Eigenschaften

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie