How can I line up radio buttons horizontally rather than vertically? - cakephp

Question

I have been looking at the Cookbook - 7.3.3 Automagic Form Elements trying to find a way for radio buttons to line up horizontally rather than vertically. I have been looking at the 'div' => 'class_name' $options also the $options[‘between’], $options[‘separator’] and $options[‘after’] but have been unsuccessful. Is there a "cake" way of doing this?
<?=$form->input('Product Type', array(
'type' => 'radio',
'id' => $tire['ProductType']['id'],
'name' => $tire['ProductType']['id'],
'options' => array(2=>'Tire Manufacturer', 7=>'Rim Manufacturer '),
));?>
The of equivalent this
<label>Product Type</label>
<div style="padding-top:5px;">
<input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$tire['ProductType']['id']?>"> Tire Manufacturer
<input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$wheel['ProductType']['id']?>"> Rim Manufacturer
</div>

Answer 1

This works for me:
Inside your view file (viewfile.ctp):
<div>
<?php
echo $this->Form->create('changeRegion');
$options=array('US'=>'U.S.','CA'=>'Canada', 'FN'=>'International');
$attributes=array('legend'=>false, 'label'=>false, 'value'=>'US', 'class'=>'locRad');
echo $form->radio('subLocation',$options,$attributes);
echo $this->Form->end();
?>
<div class="clear"></div>
</div>
Make sure 'label'=>false and 'legend'=>false are set in your attributes.
In your stylesheet:
input[type=radio] {
float:left;
margin:0px;
width:20px;
}
form#changeRegionStdForm input[type=radio].locRad {
margin:3px 0px 0px 3px;
float:none;
}
I fought this forever because of the default CakePHP style rule for input[type=radio] (inside the app/webroot/css/cake.generic.css file) was always taking precedence. I generated another rule to specifically pick out the radio group in question by referencing the form along with the radio input rule appended with the class name (form#changeRegionStdForm input[type=radio].locRad). I initially did this with the form# rule listed before the input[type=. Only when I moved it after the input[type= did the radio buttons line up horizontally.
I hope this makes sense and actually helps someone else.

Answer 2

The easiest way to do this is to put each radio button inside an 'LI' tag, and then apply CSS styles to the 'UL' that tells it to show 'LI' tags horizontally instead of vertically. You can find a lot of horizontal list designs here.

Answer 3

I found this post very late. But i thought others might stumble upon this like i did now.
Try something like this:
<ul id="hMenu"><li>
<?php
$attributes=array('legend'=>false, 'separator'=>'</li><li>', 'label'=>false);
$form->input('Product Type',$options, $attributes);
?>
</li></ul>
Now style the id hMenu. That should solve this problem.
This without any styling gives verical radio buttons. But if you use css styling on ul and li you could literally make it stand on its head! :)

Answer 4

use this:
$form->input('Product Type', array(
'type' => 'radio',
'id' => $tire['ProductType']['id'],
'name' => $tire['ProductType']['id'],
'options' => array(2=>'Tire Manufacturer', 7=>'Rim Manufacturer '),
***********************
'seperator' => '<br />'
***********************
));
which result look like this :
<label>Product Type</label>
<div style="padding-top:5px;">
<input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$tire['ProductType']['id']?>"> Tire Manufacturer
<br />
<input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$wheel['ProductType']['id']?>"> Rim Manufacturer
</div>

Answer 5

Try this, I got my code working through this..
<ul id = "navlist">
<fieldset>
<legend><?php echo __('Insert User'); ?></legend>
<li><?php //echo $this->Form->input('Site', array('options' => $arraycharges));?></li>
<li><?php echo $this->Form->input('MobileApp', array('options' => array('admin' => 'Admin', 'user' => 'User')));?></li>
<li><?php echo $this->Form->input('Location', array('options' => array('admin' => 'Admin', 'user' => 'User')));?></li>
<li><?php echo $this->Form->end(__('GO')); ?></li>
</fieldset>
</ul>
in the style sheet add the following..
#navlist li {
display: inline-block;
list-style-type: none;
padding-right: 20px;
}

Answer 6

You an follow like this :
<ul>
<li style="width: 200px;float: left;list-style: none">
<?php
$attributes=array(
'legend'=>false,
'after'=>'</li>',
'separator'=>'</li><li style="width: 200px;float: left;list-style: none">',
);
echo $this->Form->radio('xyz_name',$myOptions,$attributes);
?>
</li>
</ul>