Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Yii CHtml::radioButtonList - CSS to align horizontally

I am using yii framework for my development . I wrote CSS and able to align my <input tags in html properly and I am using the same CSS for yii and the alignment is messed up . Could some help me on this ?

I wanted it to be displayed like below

I wanted it to be displayed like below

Here is the yii code I have

<div id="gender">
        <label>Gender :</label>
        <?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array('separator'=>'')); ?>
    </div>

CSS

 <style type="text/css">          
           div#gender {
                    margin-top:20px;
                    margin-left:200px;
           }      

           div#gender label
           {
                   font-weight: bold;
                   font-size: 0.9em;
                   float:left;
                   margin-left:2px;
                   text-align:left;
                   width:100px;
            }

</style>

and it is coming as below image

enter image description here

like image 793
Bujji Avatar asked Aug 20 '11 00:08

Bujji


People also ask

How do I Align elements in HTML?

Another method for aligning elements is to use the float property: Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix hack" to fix this (see example below). Then we can add the clearfix hack to the containing element to fix this problem:

How do I add a hidden field to a radio button?

self::hiddenField($htmlOptions['name'],$uncheck,$hiddenOptions) : ''; // add a hidden field so that if the radio button is not selected, it still submits a value return $hidden . self::activeInputField('radio',$model,$attribute,$htmlOptions); Generates a radio button for a model attribute.

How to center an element vertically in CSS?

Then we can add the clearfix hack to the containing element to fix this problem: There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding: I am vertically centered. To center both vertically and horizontally, use padding and text-align: center: I am vertically and horizontally centered.

How to create a radio button list using self?

self::radioButtonList($name,$selection,$data,$htmlOptions); Generates a radio button list for a model attribute. The model attribute value is used as the selection. If the attribute has input error, the input field's CSS class will be appended with errorCss. See Also radioButtonList activeRangeField() method (available since v1.1.11)


3 Answers

<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array(
    'labelOptions'=>array('style'=>'display:inline'), // add this code
    'separator'=>'',
)); ?>
like image 199
jamband Avatar answered Oct 03 '22 20:10

jamband


Looks like you might need

div#gender input
{
    float:left;
}
like image 27
Joseph Marikle Avatar answered Oct 03 '22 19:10

Joseph Marikle


add this css code somewhere (to the end of css/main.css, for example):

input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }
like image 22
zuups Avatar answered Oct 03 '22 19:10

zuups