Yii Framework Forum: Form layout: wrong design activeCheckBoxList and activeRadioButtonList - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Form layout: wrong design activeCheckBoxList and activeRadioButtonList Rate Topic: ***** 2 Votes

#1 User is offline   StErMi 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 259
  • Joined: 30-March 09

Posted 06 February 2010 - 12:50 PM

Hi all, I need to change the yii form layout couse I think radiobutton are rendered in a wrong way

Posted Image

Like you can see the deseign is wrong, how can I have radio buttons rendered all in the same line, or one in every line? Like you can see they take too much space!

And I think I will have the same problem with checkbox
0

#2 User is offline   scythah 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 44
  • Joined: 20-April 09

Posted 06 February 2010 - 02:46 PM

Edit the CSS that corresponds to the radio buttons (and labels). Change them from display: block; to display: inline;
0

#3 User is offline   StErMi 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 259
  • Joined: 30-March 09

Posted 07 February 2010 - 01:19 PM

View Postscythah, on 06 February 2010 - 02:46 PM, said:

Edit the CSS that corresponds to the radio buttons (and labels). Change them from display: block; to display: inline;


There's no css about radiobutton in form.css and I like label's style in normal input.
Someone can fix this?
0

#4 User is offline   jayrulez 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 348
  • Joined: 29-July 09

Posted 07 February 2010 - 01:45 PM

View PostStErMi, on 07 February 2010 - 01:19 PM, said:

There's no css about radiobutton in form.css and I like label's style in normal input.
Someone can fix this?


use css to target your labels for checkboxes and radios and set their display to inline or inline-block.
php:
foreach(array('cat', 'dog', 'cow') as $animal) echo $animal."\n";

python:
[(animal, print(animal)) for animal in ['cat', 'dog', 'cow']]

ruby:
['cat', 'dog', 'cow'].each {|animal| puts animal}


You say Tomato, I say Tomato.
0

#5 User is offline   andy_s 

  • Random Member Title
  • Yii
  • Group: Moderators
  • Posts: 1,526
  • Joined: 22-June 09
  • Location:Russia, Kostroma

Posted 07 February 2010 - 02:07 PM

div.yiiForm label { display: inline }

0

#6 User is offline   StErMi 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 259
  • Joined: 30-March 09

Posted 08 February 2010 - 06:06 AM

View Postandy_s, on 07 February 2010 - 02:07 PM, said:

div.yiiForm label { display: inline }



yiiForm is not used in Yii 1.1.x

:)
0

#7 User is offline   Sander 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 169
  • Joined: 03-November 09
  • Location:Amsterdam, Netherlands

Posted 08 February 2010 - 09:57 AM

There's the 'template' option in the $htmlOptions paramater that lets you specify the html for an individual label/value combination.

However, this brings me to a related question. Is it somehow possible to present radio/checkbox lists in a way that shows (for example) 3 options per line? Or do I need to create my own loop in combination with checkbox() instead of checkboxlist() for this?
0

#8 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,907
  • Joined: 04-October 08
  • Location:DC, USA

Posted 08 February 2010 - 10:56 AM

@Sander: You can use css to control how many options to display each row (float: left; width: 30%;)
0

#9 User is offline   Sander 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 169
  • Joined: 03-November 09
  • Location:Amsterdam, Netherlands

Posted 09 February 2010 - 06:09 AM

Ah yes, that could work, thanks!
0

#10 User is offline   luis diego 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 31
  • Joined: 02-February 10
  • Location:Costa Rica

Posted 26 February 2010 - 01:25 PM

View PostSander, on 09 February 2010 - 06:09 AM, said:

Ah yes, that could work, thanks!


Don't work.
Because, the default separator is a new line "<br/>" . And with the last css code you will see like this:

Posted Image

If you modify the option "separator" to the checkboxList to " - " (for example). The last Css code of giang don't work for you purpose and see like this:

Posted Image
0

#11 User is offline   sumwai 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 85
  • Joined: 16-March 09

Posted 24 August 2010 - 12:48 AM

I also want to get rid of the <br/>. Currently what I can think of is using activeCheckBox instead. Any ideas? does the template option solves this?
tipstank.com - where I share my coding stuff
0

#12 User is offline   bobris 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 24-September 10

Posted 24 September 2010 - 03:48 PM

*
POPULAR

Had the same problem.

Simple solution is to use the option 'labelOptions' to either set a different class for label, or just to disable block display

<?php echo $form->radioButtonList($model, 'Model_id', 
CHtml::listData($ModelTypes,'id','Name'),
array('labelOptions'=>array('style'=>'display:inline'))); ?>


To get rid of '<br/>' separator the option 'separator' worked for me just fine.

<?php echo $form->radioButtonList($model, 'Model_id', 
CHtml::listData($ModelTypes,'id','Name'),
array('separator'=>'','labelOptions'=>array('style'=>'display:inline'))); ?>

6

#13 User is offline   StErMi 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 259
  • Joined: 30-March 09

Posted 26 September 2010 - 11:23 AM

Going to cry watching my old project RemindMe on Facebook Apps TT
0

#14 User is offline   rainyjune 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 14-March 10

Posted 25 November 2010 - 10:19 PM

@bobris,thank you.
0

#15 User is offline   Louisvdw 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 15-January 11

Posted 15 January 2011 - 12:36 PM

@bobris, your solution works great if you use the normal form type. When you change your form to "wide form" it does not display correctly (all the labels are displayed first followed by all the radio buttons)

So changing
<div class="form">


to
<div class="wide form">


will not work with this solution. <_<
0

#16 User is offline   enotirab 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 46
  • Joined: 14-January 11

Posted 21 February 2011 - 01:02 PM

View PostLouisvdw, on 15 January 2011 - 12:36 PM, said:

@bobris, your solution works great if you use the normal form type. When you change your form to "wide form" it does not display correctly (all the labels are displayed first followed by all the radio buttons)

So changing
<div class="form">


to
<div class="wide form">


will not work with this solution. <_<



I am also having trouble with the "wide-form" when trying to display inline radio button options. The labels end up completely separate from the buttons. Has anyone found a solution for this? I'll post one if I'm able to figure it out.
0

#17 User is offline   enotirab 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 46
  • Joined: 14-January 11

Posted 21 February 2011 - 01:46 PM

View PostLouisvdw, on 15 January 2011 - 12:36 PM, said:

@bobris, your solution works great if you use the normal form type. When you change your form to "wide form" it does not display correctly (all the labels are displayed first followed by all the radio buttons)

So changing
<div class="form">


to
<div class="wide form">


will not work with this solution. <_<



Okay, I found a solution to this one. When using the wide form, add the following to your form.css file:
DIV#content .inlineRadioButton LABEL
{
        float: none;
	display:inline;

}


DIV#content .inlineRadioButton input
{
  display: inline;
}



	<div class="row">
        <?php echo $form->labelEx($model,'attribute'); ?>

          <div id="inlineRadioButton" class="inlineRadioButton" >
        <?php

          echo $form->radioButtonList($model,'attribute',
                $this->getRadioButtonOptions(), array('separator'=> ' ')
                );

         ?>
         </div>
         <?php echo $form->error($model,'attribute'); ?>
	</div>



Alternatively you could simply add "float:none;" to the style portion of the labelOptions as mentioned earlier in the post.
0

#18 User is offline   el chief 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 56
  • Joined: 24-November 10

Posted 16 March 2011 - 04:15 PM

here's how to do it without modifying your php or html:

http://learnyii.blog...box-inline.html
http://learnyii.blogspot.com/

Quick snippets to get you up to speed with the Yii PHP framework
0

#19 User is offline   Preston Brown 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 31
  • Joined: 23-February 11

Posted 05 May 2011 - 07:52 PM

Excellent solution, good alternative to having to specify a labelOptions field in every checkboxlist type of form field. You pretty much always want checkboxes and radio buttons to have their label next to them, not on another separate line.

Thanks.
0

#20 User is offline   Anurag.verma 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 28-August 13

Posted 05 September 2013 - 06:30 AM

B)
    • dsfdfdfdf

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users