An alternative approach to columns and other detailed layout control
An alternative approach to columns and related things
Introduction
The solution to columns provided on one of the other pages assumes that you are building a module, since it requires you to add a hook. The following is an approach that allows theme-based control of form layout. It is geared, to some extent, toward the 'webform' module, but is useful for any form.
More IDs
The first problem here is that the form module is stingy with ID attributes, which makes it disproportionately difficult to take CSS control. There are many 'form-item' divs that have no unique attributes visible to CSS selectors.
This is easy to fix by theming the form_element function
<?php
// we override this to get css-able id's on the elements.
function phptemplate_form_element($title, $value, $description = NULL, $id = NULL, $required = FALSE, $error = FALSE) {
if($id) {
$output = '<div class="form-item" id="form-item-' . form_clean_id($id) . '">'."\n";
} else {
$output = '<div class="form-item">'."\n";
}
$required = $required ? '<span class="form-required" title="'. t('This field is required.') .'">*</span>' : '';
if ($title) {
if ($id) {
$output .= ' <label for="'. form_clean_id($id) .'">'. t('%title: %required', array('%title' => $title, '%required' => $required)) . "</label>\n";
}
else {
$output .= ' <label>'. t('%title: %required', array('%title' => $title, '%required' => $required)) . "</label>\n";
}
}
$output .= " $value\n";
if ($description) {
$output .= ' <div class="description">'. $description ."</div>\n";
}
$output .= "</div>\n";
return $output;
}
?>The entire effect of this is to put an ID on the overall form-item div, instead of only on some of its interior components.
How about an ID for the form?
At least with webform, there is no unique ID at the top of the form. For webform, here is a solution using the themeing provided in that module:
<?php
function phptemplate_webform_form_1666 ($form) {
return '<div id="member_info_form">'. form_render($form) . '</div>';
}
?>Now, how about getting some use out of all this?
Given ID's on form-item divs, you can use CSS. here's an example with checkboxes in columns. To create this, I used the Firefox 'view formatted source' extension to grab the IDs of all the elements I cared about. The result: two columns of checkboxes without any per-form PHP except to add the unique ID.
#member_info_form div.description {
margin-top: 0;
}
#member_info_form div.webform-component-textfield div.form-item {
min-height: 3em;
height: auto;
}
#member_info_form div.form-item input.form-text {
float: right;
margin-right: 30px;
top: -10px;
position: relative;
}
#member_info_form div.form-item > label {
display: block;
clear: both;
}
#member_info_form div.description {
display: block;
clear: both;
margin-top: 0;
margin-bottom: 0;
}
#form-item-edit-submitted-1161135984-1160572783-preschool_2_to_5_years_old {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160572783-religious_school_k7 {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160572783-special_needs_education {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
clear: left;
}
#form-item-edit-submitted-1161135984-1160572783-prozdor_offsite_hebrew_high_school {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160572783-family_education {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160572783-adult_education {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160008632-youth_toddlerspreschool {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160008632-youth_15_grade {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160008632-youth_56_grade {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
clear: left;
}
#form-item-edit-submitted-1161135984-1160008632-youth_712_grade {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160008632-adult_singles_programming {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160008632-adult_social_programming {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160008632-family_programming {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160010108-social_action_programs {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160010108-committee_work {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
clear: left;
}
#form-item-edit-submitted-1161135984-1160010108-israel_programming {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160010240-shabbat_services {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160010240-daily_worship_services {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160010240-family_religious_services {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}
#form-item-edit-submitted-1161135984-1160010240-alternative_religious_services {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
clear: left;
}
#form-item-edit-submitted-1161135984-1160010240-holiday_celebrations {
margin-top: 0;
margin-bottom: 0;
width: 20em;
float: left;
}