Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 &nbsp;&nbsp;
    <input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$wheel['ProductType']['id']?>"> Rim Manufacturer
</div>
like image 475
Stirling Avatar asked Dec 09 '22 17:12

Stirling


2 Answers

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.

like image 121
Keith Avatar answered May 30 '23 02:05

Keith


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.

like image 41
Mike Trpcic Avatar answered May 30 '23 04:05

Mike Trpcic