Form layout with 2 columns

Yii 1.1 General Discussion
1

Hi,

Just testing Yii and got the _form.php that generated thur CRUD. Here is some info extract there:




<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'transaction-form',

	'enableAjaxValidation'=>false,

)); ?>


	<p class="note">Fields with <span class="required">*</span> are required.</p>


	<?php echo $form->errorSummary($model); ?>


	<div class="row">

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

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

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

	</div>


	<div class="row">

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

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

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

	</div>


	<div class="row">

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

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

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

	</div>


<?php $this->endWidget(); ?>


</div><!-- form -->

How could I change the layout from one single column:

unit Price

[textField]

lot size

[textField]

lot total

[textField]

into 2 coloumns

unit price [textField]

lot size [textField]

lot total [textField]

Thanks!

2

To render in the same line:


<form class="wide form">

See form.css

3

Many thanks!

4

What if i want to make it a 4 column layout? Basically like this:

UserLabel [User Input] TitleLabel [Title Input]

I see how you can use ‘wide form’ but that doesnt allow you to have multiple columns of data within the same row

5

I am facing a similar problem. Can someone please comment on this post. Thanking you in advance.

6

well, you have first to understand what css theme are you using. i believe it’s the default blueprint.

if that’s true…on your views you design them as you want. for example, you want two inputfields in the same ROW (hint. check .row class inside your css files) you would do something like this…




<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

        'id'=>'transaction-form',

        'enableAjaxValidation'=>false,

)); ?>


        <p class="note">Fields with <span class="required">*</span> are required.</p>


        <?php echo $form->errorSummary($model); ?>


        <div class="row">

            <span style="float:left; width: 120px;">

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

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

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

            </span>


            <span style="float:right; width:120px;">

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

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

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

            </span>      

        </div><!-- HERE IT ENDS ONE ROW, EVERYTHING NOW WILL COME BELOW -->


        <div class="row"><!-- NEW ROW .... -->

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

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

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

        </div>


<?php $this->endWidget(); ?>


</div><!-- form -->

so you can write your views the way you want, create your boxes in css and put them inside your views, then inside that same boxes put your php code related to the form…

does it make sense what i’m saying?