Verwendung
Flexible Bemaßungen im Grid
Die Spalten und Zeilen des verwendeten Grids sind grundsätzlich zwischen der Mindest- und Maximal-Breite des Seitenrahmens flexibel. Weitere Informationen finden Sie in der Dokumentation des Gestaltungsrasters. Die im Grid einsetzbaren Formularelemente nehmen immer 100% der Breite ihres Elternelementes, d. h. der Grid-Spalte ein.
Falls neben einem Formularelement noch weitere Elemente wie z. B. ein Tooltip-Button (optional auch mit Beschriftung) stehen soll, so wird dieser in der Marginalspalte platziert. Dies garantiert ein einheitliches Erscheinungsbild, da so die Formularelemente auf ihren beiden Seiten und die Tooltip-Buttons in einheitlichen vertikalen Fluchten stehen.
Das Design System geht davon aus, dass grundsätzliche alle Eingabe-Elemente in Formularen ein zugeordnetes Tooltip haben können (nicht müssen!) und hält den dafür benötigten Raum in der Marginalspalte frei. Sollten innerhalb eines in sich geschlossenen Formular-Abschnitts an allen enthaltenen Elementen keine Tooltips benötigt werden (wie dies z. B. in einer Filter-Komponente der Fall ist), dann kann dieser Raum für Formularelementen freigegeben werden, sodass deren Grid sich auf 100% des Eltern-Elements erstreckt. Mischformen innerhalb von Bereichen sind nicht erlaubt, d. h. flexible Formularelemente müssen immer links und rechts auf einer gemeinsamen vertikalen Achse stehen. Ausnahmen für Elemente mit vorhersagbarer fester Breite (z. B. Datumsangaben oder Postleitzahlen) sind allerdings zulässig.
Fixe Bemaßungen im Grid
Fix bemaßte Formularelemente in flexiblen Grid-Spalten mit zu geringer Breite werden insbesondere auf kleineren Bildschirmen zu Darstellungsproblemen führen. Auch auf größeren Bildschirmen kann es zu unerwünschten Lücken kommen und im Ernstfall optische Zusammenhänge verloren gehen. Daher sollte diese Kombination vermieden werden und Elemente mit fester Breite nur in Gridspalten mit fester Breite eingesetzt werden.
Fixe Breiten sind nur für Spalten und insbesondere die Elemente in diesen Spalten vorgesehen, wo diese funktional/ inhaltlich sinnvoll sind, da sich in ihnen Eingabelemente mit festgelegten Breiten befinden. Beispiele hierfür sind Datums-Eingabefelder, KFZ-Kennzeichen oder Vergleichbare, deren Breite verlässlich bekannt sind. In diesem Fall muss eine Grid-Klasse mit festen Bemaßungen benutzt werden und zudem die damit korrespondierende Breite des Formular-Elements per HTML size-Attribut gesetzt werden.
Bei dieser Berechnung muss beachtet werden, dass die feste Breite immer der maximalen Anzahl der einzugebenden Zeichen entspricht. Ebenso muss bei der Vergabe der Breiten bedacht werden, dass die englischsprachige Variante unter Umständen andere Textlängen benötigt. Als Beispiel: der Platzhaltertext „tt.mm.jjjj“ benötigt etwas weniger Breite als „DD.MM.YYYY“, aber auch letzterer muss vollständig sichtbar sein.
Ausrichtung in Formularelementen
Die Ausrichtung von Texten und Zahlenfolgen kann in Feldern über entsprechende Klassen gesteuert werden, die eine linksbündige, zentrierte oder rechtsbündige Ausrichtung ermöglichen.
Formularelemente in Tabellen
In Tabellen sind generell alle Arten von Formular-Elementen und Icon-Buttons zulässig, mit folgenden Einschränkungen:
- Datei-Uploads sind in Tabellen fachlich nicht vorgesehen.
- Nicht zulässig sind Fieldsets, hier müssen die typischerweise in einem Fieldset enthaltenen Elemente (z. B. Datumsbereiche von–bis) auf zwei Tabellenspalten mit eigenen Überschriftenzellen aufgeteilt werden.
- Ebenfalls nicht zulässig sind Standard-Buttons, diese stehen generell immer in einer eigenen Schaltfächenzeile außerhalb von Tabellen.
Wenn in einer Tabelle neben einem Formularelement oder auch den Text-Inhalten noch weitere Funktionselemente wie z. B. Icon-Buttons stehen sollen (z. B. „Zeile löschen“), so müssen diese in eigene Funktionspalten platziert werden. Dies garantiert ein einheitliches Erscheinungsbild, da so gleichartige Buttons in der gleichen vertikalen Flucht stehen und somit leichter erfassbar sind. Diese Einschränkung gilt nicht für Tooltips – diese werden weiterhin unmittelbar im Anschluss an das Element platziert, für das sie eine Erklärung bereitstellen.
Flexible Bemaßungen in Tabellen
Das Layout der Spalten einer Datentabelle ist generell flexibel und wird weitestgehend dem Browser überlassen. Das Verhalten und die weiteren Regeln entspricht dem der Grid-Klassen.
Fixe Bemaßungen in Tabellen
Fixe Breiten sind nur für Spalten und Elemente in Spalten vorgesehen, wo diese funktional/inhaltlich sinnvoll sind, z. B. für Funktionsspalten mit ausschließlich fix bemaßten Buttons, oder für Datenzellen, in denen sich Eingabelemente mit festgelegten Breiten befinden, wie Datums-Eingabefelder, deren Breite verlässlich bekannt sind.