You could do something like this without too much work. There is a CSS ready class of gf_list_inline which will allow you to put all 7 checkboxes on one row. Then, hide the labels (Monday - Sunday) and then unhide the time slots (6am-9am, etc.)
Then, add an html block above the checkbox fields, with a left margin of 32% to mimic the left label of your time slots below.
Here is some of the CSS I used (my form is ID 210):
[css]
/* hide the labels for days of the week checkboxes */
body #gform_fields_210 label {
display: none;
}
/* now display the timeslots */
body #gform_fields_210 label.gfield_label {
display: block;
}
/* space out the inline checkboxes a little */
body #gform_fields_210 .gfield_checkbox li {
width: 40px!important;
}
/* space out the individual days of the week in the html block */
body #gform_wrapper_210 li.gfield_html span {
display:inline-block;
float:left;
width:50px!important;
}
There are some pointers. Let us know where you get stuck.
Be sure to use "left label alignment" on the form settings. And also, I wrapped each day in a span in the html block, so I could control their width.
Posted 11 years ago on Saturday November 17, 2012 |
Permalink