Multiple Fields in a single line (CActiveForm)

Yii 1.1 General Discussion
1

Hi,

This, I guess, is really a petty stuff. Anyone help me to put multiple fields in a single line in CActiveForm? I can’t seem to do this at form.css.

2

Check the markup: it is something like:




<div class="row">

     <label>

     <input field>

</div>

I suggest you or to work on this markup, or to try somethinkg like that in css:




div.row

{

   float: left;

   width: 250px;

}

If your container is 750 px, the filed will be on 3 columns.

Anyway, if you find any problem, feel free to change the markup of the form. The Gii generated code is a sample, not a finished product.

3

Let’s say we have we have these fields in our view


<div class="row">

		<?php echo $form->labelEx($model,'username'); ?>

		<?php echo $form->textField($model,'username'); ?>

		<?php echo $form->error($model,'username'); ?>

</div>

<div class="row">

		<?php echo $form->labelEx($model,'password'); ?>

		<?php echo $form->passwordField($model,'password'); ?>

		<?php echo $form->error($model,'password'); ?>

</div>

If you want these fields to be in one line you can slightly change it




<div style="float:left;padding:10px">

      <div class="row">

		<?php echo $form->labelEx($model,'username'); ?>

		<?php echo $form->textField($model,'username'); ?>

		<?php echo $form->error($model,'username'); ?>

      </div>

</div>

<div style="float:left;padding:10px">

      <div class="row">

		<?php echo $form->labelEx($model,'password'); ?>

		<?php echo $form->passwordField($model,'password'); ?>

		<?php echo $form->error($model,'password'); ?>

      </div>

</div>

<div style="clear:both></div>

I beleive there is a more subtle solution but this one works too ;)

4

Below is the code for label in form.css file.

div.form label

{

font-weight: bold;


font-size: 0.9em;


display: block;

}

By removing ( display:block ), you can have fields at one line.

5

try editing your form.css




div.form .row1

{

    display: inline-table;

    width:800px;

}

div.form .row1 .row{width:123px; float: left; margin: 0px; }

div.form .row1 .row input[type="text"]{width:106px;} //adjust width according to your text size

and _form.php




<div class="row1">

	<div class="row">

		<?php echo $form->labelEx($model,'bill_no'); ?>

		<?php echo $form->textField($model,'bill_no',array('size'=>10,'maxlength'=>50)); ?>

		<?php echo $form->error($model,'bill_no'); ?>

	</div>


	<div class="row">

		<?php echo $form->labelEx($model,'branch_code'); ?>

		<?php echo $form->textField($model,'branch_code',array('size'=>10,'maxlength'=>100)); ?>

		<?php echo $form->error($model,'branch_code'); ?>

	</div>

</div>

this might help