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
...@@ -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(
type="radio", 'label',
css_class=css_class, contents=self.render_element('input',
name=key, type="radio",
value=value, css_class=css_class,
extra=extra_item) + text name=key,
value=value,
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(
type="radio", 'label',
css_class=css_class, contents=self.render_element('input',
name=key, type="radio",
value=value, css_class=css_class,
checked=None, name=key,
extra=extra_item) + text value=value,
checked=None,
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(
type="checkbox", 'label',
css_class=css_class, contents=self.render_element('input',
name=key, type="checkbox",
value=value, css_class=css_class,
extra=extra_item) + text name=key,
value=value,
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(
type="checkbox", 'label',
css_class=css_class, contents=self.render_element('input',
name=key, type="checkbox",
value=value, css_class=css_class,
checked=None, name=key,
extra=extra_item) + text value=value,
checked=None,
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