Commit 4086f9a6 authored by Jérome Perrin's avatar Jérome Perrin

Formulator,xhtml_style: render multi radio and checkboxs with a label

This way, clicking on the label is enough to select the radio button,
or tick the checkbox, no need to click on the small button.
This is also probably better for accessibility.

CSS is adjusted a bit, so that the style for "general" field labels
do not apply to this new label.
parent 87c30a04
Pipeline #20787 passed with stage
...@@ -447,16 +447,16 @@ fieldset.bottom > .field > label { ...@@ -447,16 +447,16 @@ fieldset.bottom > .field > label {
padding: revert; padding: revert;
} }
.content .field label { .content .field > label {
width: 30%; width: 30%;
} }
.content .field label, .content .field > label,
.content .field .input { .content .field .input {
float: left; float: left;
} }
body[dir="rtl"] .content .field label, body[dir="rtl"] .content .field > label,
body[dir="rtl"] .content .field .input { body[dir="rtl"] .content .field .input {
float: right; float: right;
} }
...@@ -473,7 +473,7 @@ fieldset.bottom .field .input, ...@@ -473,7 +473,7 @@ fieldset.bottom .field .input,
vertical-align: middle; vertical-align: middle;
} }
.content .required label { .content .required > label {
font-weight: bold; font-weight: bold;
} }
......
...@@ -1277,21 +1277,25 @@ class RadioWidget(SingleItemsWidget): ...@@ -1277,21 +1277,25 @@ class RadioWidget(SingleItemsWidget):
return string.join(rendered_items, "<br />") return string.join(rendered_items, "<br />")
def render_item(self, text, value, key, css_class, extra_item): def render_item(self, text, value, key, css_class, extra_item):
return self.render_element('input', return render_element(
'label',
contents=self.render_element('input',
type="radio", type="radio",
css_class=css_class, css_class=css_class,
name=key, name=key,
value=value, value=value,
extra=extra_item) + text extra=extra_item) + text)
def render_selected_item(self, text, value, key, css_class, extra_item): def render_selected_item(self, text, value, key, css_class, extra_item):
return self.render_element('input', return render_element(
'label',
contents=self.render_element('input',
type="radio", type="radio",
css_class=css_class, css_class=css_class,
name=key, name=key,
value=value, value=value,
checked=None, checked=None,
extra=extra_item) + text extra=extra_item) + text)
RadioWidgetInstance = RadioWidget() RadioWidgetInstance = RadioWidget()
...@@ -1322,21 +1326,26 @@ class MultiCheckBoxWidget(MultiItemsWidget): ...@@ -1322,21 +1326,26 @@ class MultiCheckBoxWidget(MultiItemsWidget):
return string.join(rendered_items, "<br />") return string.join(rendered_items, "<br />")
def render_item(self, text, value, key, css_class, extra_item): def render_item(self, text, value, key, css_class, extra_item):
return self.render_element('input', return render_element(
'label',
contents=self.render_element('input',
type="checkbox", type="checkbox",
css_class=css_class, css_class=css_class,
name=key, name=key,
value=value, value=value,
extra=extra_item) + text extra=extra_item) + text)
def render_selected_item(self, text, value, key, css_class, extra_item): def render_selected_item(self, text, value, key, css_class, extra_item):
return self.render_element('input', return render_element(
'label',
contents=self.render_element('input',
type="checkbox", type="checkbox",
css_class=css_class, css_class=css_class,
name=key, name=key,
value=value, value=value,
checked=None, checked=None,
extra=extra_item) + text extra=extra_item) + text)
MultiCheckBoxWidgetInstance = MultiCheckBoxWidget() MultiCheckBoxWidgetInstance = MultiCheckBoxWidget()
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment