By Trappies on

Hi,

I have been developing forms now for a bit and really getting the hang of it. I have one problem though. I want to be able to place the Radios group buttons horizontally instead of the vertical fashion that it comes standard. I don't want to change themes because this is all standard.

I have seen several posts requesting this info but there is very little responses. Anyone have a clear example of how I can setup something like this?

Thanks in advance.

Davin.

⋅ Categories: Drupal 6.x

Comments

bwv’s picture

bwv commented

Usually this is done with the CSS code

{display: inline}

You can then add width and padding codes, as well as margin codes, if necessary, to the get look you desire.
----------------------------------------------------------------------
http://classicvinyl.biz
http://music.bwv810.com
http://davidhertzberg.com
http://association.drupal.org/user/1207

I am a writer, researcher and solo drupal freelancer

Trappies’s picture

Trappies commented

Where in the code would I put this? In the #attributes field?

Trappies’s picture

Trappies commented

This is the code it generates if I put it in the #attributes cell:

<div class="form-radios"><div class="form-item" id="edit-a-details-1-acceptreject-0-wrapper">
 <label class="option"><input type="radio" id="edit-a-details-1-acceptreject-0" name="a_details[1][acceptreject]" value="0"   style="display: inline" class="form-radio" /> Accept</label>
</div>
<div class="form-item" id="edit-a-details-1-acceptreject-1-wrapper">
 <label class="option"><input type="radio" id="edit-a-details-1-acceptreject-1" name="a_details[1][acceptreject]" value="1"   style="display: inline" class="form-radio" /> Reject</label>

</div>
Trappies’s picture

Trappies commented

This is the code it generates if I put it in the #attributes cell:

<div class="form-radios"><div class="form-item" id="edit-a-details-1-acceptreject-0-wrapper">
 <label class="option"><input type="radio" id="edit-a-details-1-acceptreject-0" name="a_details[1][acceptreject]" value="0"   style="display: inline" class="form-radio" /> Accept</label>
</div>
<div class="form-item" id="edit-a-details-1-acceptreject-1-wrapper">
 <label class="option"><input type="radio" id="edit-a-details-1-acceptreject-1" name="a_details[1][acceptreject]" value="1"   style="display: inline" class="form-radio" /> Reject</label>

</div>

Still doesn't align it the way I want it though

Trappies’s picture

Trappies commented

Hi,

Found a better way of doing it. All I did was split up the radio buttons and then placed them separately like this :

        $form['a_details'][$cb_id]['accept'] = array(
		'#type' => 'radio',
		'#title' => 'Accept',
		'#name' => 'acceptreject' . $cb_id,
		'#options' => array(t('Accept')),
		);
		
	$form['a_details'][$cb_id]['reject'] = array(
		'#type' => 'radio',
		'#title' => 'Reject',
		'#name' => 'acceptreject' . $cb_id,
		'#options' => array(t('Reject')),
	);

Then what I did is just used the normal theme_ hook to do the complete layout of this perticular form.

Davin