Yii: Cactiveform fields on same row - php

Question

I'm trying to do something, which I feel really dumb for, and I'm sure is very simple. However, I'm having such a difficult time trying to find any clear examples on the web. I've tried modifying divs and css, but to no avail.
Can anyone give me a clear example of how to have, for instance 2 or more form fields on the same line in Cactive form for creating a new model, as opposed to the default one on each line.
Any help would be greatly appreciated!!
I've attempted form = 'wide form'
but I get strange formatting that ends up like in the example here:
http://imgur.com/E5VVs

Answer 1

Suppose this is your form (taken from Yii documentation)
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
<?php $this->endWidget(); ?>
You could use blueprint default built depending on the width of your page to split it into 2 columns like
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'focus'=>array($model,'firstName'),
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<div class="span-8">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="span-8 last">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
</div>
<?php $this->endWidget(); ?>
you can get your self familiar with blueprint css or general css rules in tons of places on the web. sorry I cant help more without seeing your code. if there is already a built in magical solution for this perhaps someone else knows it?

Answer 2

For the below example:
<div class="row">
<?php echo $form->labelEx($model,'firstName'); ?>
<?php echo $form->textField($model,'firstName'); ?>
<?php echo $form->error($model,'firstName'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'lastName'); ?>
<?php echo $form->textField($model,'lastName'); ?>
<?php echo $form->error($model,'lastName'); ?>
</div>
All you need to do is set change a little css
.row {
width:200px; /* or whatever you prefer */
float:left;
}
Remember to clear:left after your finished floating elements or other elements may wrap oddly.
You can also use:
.row {
width:200px; /* or whatever you prefer */
display:inline-block;
}
This does something different but may be a better option for you. Your rows will stay in the dom structure unline when floating, but it may have unintended results. Try both and see what you come up with.

Answer 3

Just change the CSS class to "column" instead of "row" of the div prior to ones you wish to put on the same row.
Example:
To change the following four row divs ...
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
into three divs that sits side-by-side, and the last div on a new row, just do the following:
<div class="column"> ... </div>
<div class="column"> ... </div>
<div class="row"> ... </div>
<div class="row"> ... </div>
Or am I completely misunderstanding the question...