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 {
padding: revert;
}
.content .field label {
.content .field > label {
width: 30%;
}
.content .field label,
.content .field > label,
.content .field .input {
float: left;
}
body[dir="rtl"] .content .field label,
body[dir="rtl"] .content .field > label,
body[dir="rtl"] .content .field .input {
float: right;
}
......@@ -473,7 +473,7 @@ fieldset.bottom .field .input,
vertical-align: middle;
}
.content .required label {
.content .required > label {
font-weight: bold;
}
......
......@@ -1277,21 +1277,25 @@ class RadioWidget(SingleItemsWidget):
return string.join(rendered_items, "<br />")
def render_item(self, text, value, key, css_class, extra_item):
return self.render_element('input',
type="radio",
css_class=css_class,
name=key,
value=value,
extra=extra_item) + text
return render_element(
'label',
contents=self.render_element('input',
type="radio",
css_class=css_class,
name=key,
value=value,
extra=extra_item) + text)
def render_selected_item(self, text, value, key, css_class, extra_item):
return self.render_element('input',
type="radio",
css_class=css_class,
name=key,
value=value,
checked=None,
extra=extra_item) + text
return render_element(
'label',
contents=self.render_element('input',
type="radio",
css_class=css_class,
name=key,
value=value,
checked=None,
extra=extra_item) + text)
RadioWidgetInstance = RadioWidget()
......@@ -1322,21 +1326,26 @@ class MultiCheckBoxWidget(MultiItemsWidget):
return string.join(rendered_items, "<br />")
def render_item(self, text, value, key, css_class, extra_item):
return self.render_element('input',
type="checkbox",
css_class=css_class,
name=key,
value=value,
extra=extra_item) + text
return render_element(
'label',
contents=self.render_element('input',
type="checkbox",
css_class=css_class,
name=key,
value=value,
extra=extra_item) + text)
def render_selected_item(self, text, value, key, css_class, extra_item):
return self.render_element('input',
type="checkbox",
css_class=css_class,
name=key,
value=value,
checked=None,
extra=extra_item) + text
return render_element(
'label',
contents=self.render_element('input',
type="checkbox",
css_class=css_class,
name=key,
value=value,
checked=None,
extra=extra_item) + text)
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