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
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
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:
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.
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.
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)
<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array(
'labelOptions'=>array('style'=>'display:inline'), // add this code
'separator'=>'',
)); ?>
Looks like you might need
div#gender input
{
float:left;
}
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With