Feature #9526
closed
FormElement: redesign 'required' / 'pattern' visualization
0%
Description
Aktuell wird, wenn in einem Form ein Required Feld nicht gefuellt ist, die ganze Form-Zeile auf 'rot' gesetzt.
- Das ist problematisch wenn mehrere Inputs in einer Zeile sind - es werden alle markiert.
- Bei Radio / Checkbox / Upload,... ist die rote Umrandung (required, pattern error) nicht deutlich genug zu erkennen.
Falls der Vorschlag nicht fuer alle Forms passend ist (sollte aber ok sein): es koennte eine Option geschaffen werden mit der man das umschalten kann (FE, Form, System).
Beispiel Form zum testen: http://webwork16.math.uzh.ch/crose/qfq/index.php?id=92
Files
Updated by Benjamin Baer over 4 years ago
- Tracker changed from Support to Feature
Updated by Benjamin Baer over 4 years ago
- Start date changed from 07.11.2019 to 15.11.2019
Updated by Carsten Rose over 4 years ago
- Due date set to 21.11.2019
- Priority changed from Normal to High
Updated by Benjamin Baer over 4 years ago
- Status changed from New to In Progress
Updated by Benjamin Baer over 4 years ago
Neuste Version mit neuen required markierungen und neuen checkboxen / radios ist oben.
Benoetigte Aenderungen:- checkbox-inline ist auf einem div - muss ein label werden:
Current: <div class="checkbox-inline"><input type="checkbox">Label blu</div> <div class="checkbox-inline"><input... Needed: <label class="checkbox-inline"><input type="checkbox">Label blue</label> - checkbox ist ganz anders:
Current: <div class="checkbox"><label><input type="checkbox">Texti</label></div> Needed: <label class="checkbox"><input type="checkbox">Texti</label> - radio nicht inline ist das gleiche:
Current: <div class="radio"><label><input type="radio">Option 1</label></div> <div class="radio"><label><input type="radio">Option 2</label></div> Needed: <label class="radio"><input type="radio">Option 1</label> <label class="radio"><input type="radio">Option 2</label>
Updated by Benjamin Baer over 4 years ago
Das problem mit dem markieren der ganzen row ist weil wir form-group pro Reihe haben - was falsch ist.
Form Group sollte nur ein input element haben und der Bootstrap Validator setzt den Error drauf.
Bootstrap 4 zeigt ein komplexes Form so:<div class="form-row">
<div class="col-md form-group">
<label class="form-control">Blablup</label>
<input class="form-control" type="text">
</div>
<div class="col-md form-group">
<label class="form-control">Blabla</label>
<input class="form-control" type="text">
</div>
</div>
Wir koennten das etwa so machen fuer den uebergang:<div class="row form-row">
<div class="col-md-6 form-group">
<label class="form-control">Blablup</label>
<input class="form-control" type="text">
</div>
<div class="col-md-6 form-group">
<label class="form-control">Blabla</label>
<input class="form-control" type="text">
<div class="helpblock">Helptext</div>
</div>
</div>
Das Problem ist dabei natuerlich dass das ganze Layout aendert, da es keine Comment und Label Column mehr gibt und diese quasi untereinander erscheinen. Macht vieles einfacher aber jedes Form sieht dann anders aus als bisher.
Waere aber gut fuer Bootstrap 4, damit das required richtig funktioniert und es macht es auch einfacher die Forms zu designen (und einen grafischen point & click editor zu erstellen in zukunft).
Updated by Benjamin Baer over 4 years ago
- Status changed from In Progress to Closed
Updated by Carsten Rose over 4 years ago
- Target version changed from 146 to 19.11.3