Feature #9526
closed
FormElement: redesign 'required' / 'pattern' visualization
Added by Carsten Rose over 4 years ago.
Updated over 4 years ago.
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
- Tracker changed from Support to Feature
- Start date changed from 07.11.2019 to 15.11.2019
- Due date set to 21.11.2019
- Priority changed from Normal to High
- Description updated (diff)
- Status changed from New to In Progress
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>
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).
- Status changed from In Progress to Closed
- Target version changed from 146 to 19.11.3
Also available in: Atom
PDF