css request: radio buttons below (or above) labels?

[derekpowell]

Filing an issue following up on my post in the formr google group:

I wonder if I could make a request to have the option to have radio buttons appear above or below choice text for mc and mc_multiple item types. When options are presented horizontally this makes it much easier to immediately see which button corresponds with which choice. I know this can be done with css styles but as a novice with web stuff it would be really helpful (and generally more convenient) to have access to this with a radio_below_label class or something similar.

[rubenarslan]

More difficult than I thought because the material design styles require the radio boxes to have absolute positioning. @cyriltata, can we structure this smarter, so that I can layout the radio button as one element rather than two spans next to the label?

[cyriltata]

@rubenarslan I think this is achievable via CSS following the material design styles in the lights of

form.form-horizontal div.form-row.form-group.radio_below_label label.radio-inline {
	padding-left: 0px;
    padding-top: 16px !important;
}

form.form-horizontal div.form-row.form-group.radio_below_label label.radio-inline .circle,
form.form-horizontal div.form-row.form-group.radio_below_label label.radio-inline .check {
	left: 50%;
}

Will need to test deeper

[rubenarslan]

I think I prefer the following. But before we do this, we should make sure the HTML is parallel for checkboxes and radio. Currently, we have two different solutions. Can you look at this?

form.form-horizontal div.form-row.form-group.radio_below_label label {
	padding-left: 0px;
}
form.form-horizontal div.form-row.form-group.radio_below_label label .mc-span {
	padding-left: 0px;
    padding-top: 16px !important;
    left: 0;
}

form.form-horizontal div.form-row.form-group.radio_below_label label .circle,
form.form-horizontal div.form-row.form-group.radio_below_label label .checkbox-material,
form.form-horizontal div.form-row.form-group.radio_below_label label .check {
	left: 0%;
}