After 1.0.2 upgrade activeRadioButtonList not rendering correctly

solasailor · February 2, 2009, 3:38am

Since I upgraded to 1.0.2 my view of activeRadioButtonList($performjoin,'hispeed',array('Y'=>'Yes', 'N'=>'No'), array ('separator'=>'  ')) does not render correctly. Any advice

qiang · February 2, 2009, 3:55am

A change introduced in 1.0.2 is that the label is enclosed inside a <label> tag. What is your new HTML code now?

solasailor · February 2, 2009, 4:20am

<?php echo CHtml::activeLabel($performjoin,'Hi-Speed Connection?'); ?>

<?php echo CHtml::activeRadioButtonList($performjoin,'hispeed',array('Y'=>'Yes', 'N'=>'No'), array ('separator'=>'  ')); ?>

</div>

qiang · February 2, 2009, 4:23am

Sorry, I mean the generated HTML code. Could you please show that? And what is the problem you are referring to?

solasailor · February 2, 2009, 4:34am

This is from the view source:

<br />

<label for="PerformJoinForm_stage name">Stage Name</label> <input name="PerformJoinForm[stagename]" id="PerformJoinForm_stagename" type="text" value=""/> </div>

<label for="PerformJoinForm_email">Email</label> <input name="PerformJoinForm[email]" id="PerformJoinForm_email" type="text" value=""/> </div>

<label for="PerformJoinForm_picture">Picture</label> <input name="PerformJoinForm[file]" id="PerformJoinForm_file" type="file"/> </div>

<label for="PerformJoinForm_About Me">About Me</label> <textarea rows="6" cols="30" name="PerformJoinForm[profile]" id="PerformJoinForm_profile"></textarea> </div>

<label for="PerformJoinForm_Age Documentation">Age Documentation</label> <input id="ytPerformJoinForm_ageid" type="hidden" value="" name="PerformJoinForm[ageid]"/><input id="PerformJoinForm_ageid_0" value="Y" type="radio" name="PerformJoinForm[ageid]"/> <label for="PerformJoinForm_ageid_0">Yes</label>  <input id="PerformJoinForm_ageid_1" value="N" type="radio" name="PerformJoinForm[ageid]"/> <label for="PerformJoinForm_ageid_1">No</label> </div>

<label for="PerformJoinForm_Hi-Speed Connection?">Hi Speed Connection?</label> <input id="ytPerformJoinForm_hispeed" type="hidden" value="" name="PerformJoinForm[hispeed]"/><input id="PerformJoinForm_hispeed_0" value="Y" type="radio" name="PerformJoinForm[hispeed]"/> <label for="PerformJoinForm_hispeed_0">Yes</label>  <input id="PerformJoinForm_hispeed_1" value="N" type="radio" name="PerformJoinForm[hispeed]"/> <label for="PerformJoinForm_hispeed_1">No</label> </div>

&nbsp; &nbsp; &nbsp; &lt;label for=&quot;PerformJoinForm_verifyCode&quot;&gt;Verification Code&lt;/label&gt;	&nbsp; &nbsp; &nbsp; &lt;div&gt; 


&nbsp; &nbsp; &nbsp; &nbsp;  &lt;img id=&quot;yw0&quot; src=&quot;/index.php?r=site/captcha&quot; alt=&quot;&quot;/&gt;	&nbsp; &nbsp; &nbsp; &nbsp;  &lt;span style=&quot;padding-left:50px;&quot;&gt;&lt;input name=&quot;PerformJoinForm[verifyCode]&quot; id=&quot;PerformJoinForm_verifyCode&quot; type=&quot;text&quot; value=&quot;&quot;/&gt;&lt;/span&gt; 


&nbsp; &nbsp; &nbsp; &lt;/div&gt; 


&nbsp; &nbsp; &nbsp; &lt;p class=&quot;hint&quot; style=&quot;padding-left:50px;&quot;&gt;Enter the letters above.


&nbsp; &nbsp; &nbsp; &nbsp;  &lt;br/&gt;

Letters are not case-sensitive.

</p>

</div>

</div>

</form>

</div>

I've attached a rendered screenshot.

mikl · February 2, 2009, 11:55am

Maybe the problem is also caused by floating labels. I use RadioButtonList with the standard CRUD files. For the new labels to be displayed correctly, i've added a container div with class radiolist around them and added this css:

<div class="simple">


<?php echo CHtml::activeLabel($user,'access'); ?>


<div class="radiolist">


<?php echo CHtml::activeRadioButtonList($user,'access',


    array('user'=>'User','manager'=>'Manager', 'admin'=>'Administrator'),


    array('separator'=>'&nbsp;')); ?>


</div>


</div>

div.yiiForm div.simple div.radiolist label {float:none;display:inline;}

qiang · February 2, 2009, 12:05pm

The generated HTML code is as expected.

The main reason for this change is to make the radio button more accessible.

solasailor · February 2, 2009, 2:40pm

I've switched back to 1.0.1 which is rendering the radio buttons correctly.

qiang · February 2, 2009, 2:42pm

Please check your CSS for labels. The default one provided by Yii (form.css) may interfere with this. Check mikl's comments also.

horizons · February 4, 2009, 1:37pm

I got a similar issue but with activeCheckBoxList which I added to the blog demo.

In the older yii version the texts of the checkbox items weren't labels.

The css code from niki solves this problem.

But I don't know if it isn't better to have a seperate css setting into form.css and give the labels of a checkbox in a checkbox group a class setting.

Instead of adding a new div only for the label and a div for the checkbox/radio group.

I mean for each input type (in the blog demo) there is one div for each input field. e.g.

<div class="row">


<?php echo CHtml::activeLabel($post,'status'); ?>


<?php echo CHtml::activeDropDownList($post,'status',Post::model()->statusOptions); ?>


</div>

and for a checkbox/ radio group you would need 2 div's



<div class="row">


<?php echo CHtml::activeLabel($post,'multiple_category'); ?>


</div>


<div class="radiolist">


 <?php echo CHtml::activeCheckBoxList($post, 'PostCategories',CHtml::listData($categories,'id','category'));?>


</div>