By harpsw on

I am trying to theme a form in a two column table layout. I can get the form to display in single column, but that's not how I need it. I would like to to appear as:

Name: name1 name2
Address: addr1 addr2
City/St/Zip: citystatezip1 citystatezip2

I have been searching, reading and trying different techniques for 3 days and can't find anything that works. I am new to Drupal but have quickly become a convert. Any help would be greatly appreciated.

My form is defined as:

function buyingpower_entry() {
$form['name1'] = array(
'#title' => t('Name 1'),
'#type' => 'textfield',
'#description' => t('Please enter Name #1'),
);
$form['name2'] = array(
'#title' => t('Name 2'),
'#type' => 'textfield',
'#description' => t('Please enter Name #2'),
);
$form['addr1'] = array(
'#title' => t('Address 1'),
'#type' => 'textfield',
'#description' => t('Please enter Address #1'),
);
$form['addr2'] = array(
'#title' => t('Address 2'),
'#type' => 'textfield',
'#description' => t('Please enter Address #2'),
);
$form['citystatezip1'] = array(
'#title' => t('City/State/Zip 1'),
'#type' => 'textfield',
'#description' => t('Please enter City, State Zip #1'),
);
$form['citystatezip2'] = array(
'#title' => t('City/State/Zip 2'),
'#type' => 'textfield',
'#description' => t('Please enter City, State Zip #2'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('submit'),
);
return $form;
}

⋅ Categories: Drupal 5.x

Comments

heytrish’s picture

heytrish commented

You can try to style your way to create a two column form field. For example:

label #name2{
display:none;
visibility:hidden;
}
input #name1{
width:100px; /* or so */
}
input #name2{
width:100px;
display:inline; /* display input field beside name1 */
}

etc, make the second field display:inline and give all the fields a width or else it will span across the page.

harpsw’s picture

harpsw commented

Thanks for the suggestion. I think that might be my best bet -- IF I can get it to work. The css has no affect. I noticed in the html source, the fields had id's of edit-... Tried these css id's and still no luck. Just to be sure, I added a background-color to the input's and no change. Here's the first few lines of html generated for the form. Any thoughts?

Name 1:

Please enter Name #1
Name 2:
Please enter Name #2
harpsw’s picture

harpsw commented

Here's the solution I came up with. I changed the form definition have a title only on the first column fields and removed all descriptions.

function buyingpower_entry() {
	$form['name1'] = array(
		'#title' => t('Name(s)'),
		'#type' => 'textfield',
	);
	$form['name2'] = array(
		'#type' => 'textfield',
	);
	$form['addr1'] = array(
		'#title' => t('Address 1'),
		'#type' => 'textfield',
	);
	$form['addr2'] = array(
		'#type' => 'textfield',
	);

The following css works:

.form-item {
	display: inline;
}

#edit-name1 {
   width:200px; 
   margin-right: 2em;
}
	
#edit-name2 {
   width:200px; 
   display:inline;
}

#edit-addr1 {
   width:200px; 
   margin-right: 2em;
}
#edit-addr2 {
   width:200px; 
   display:inline;
}