mchamma
(Maher Chamma)
May 15, 2012, 12:40am
1
Hello,
What’s the best way to position form elements in Yii? I have a CActiveForm above a CGridView. All the fields display vertically and pushes my table quite low on the page. I’d like to have multiple fields in the same row of my form. Is there a best practice to do this in Yii? I don’t want to modify the main form.css because I want this to only apply to one record type.
Thanks.
Maher
dniznick
(Dniznick)
May 15, 2012, 1:15am
2
Just mark it up with some extra divs and float them where you want them.
Not very semantic or whatever but it will get the job done.
mchamma
(Maher Chamma)
May 16, 2012, 12:25pm
3
Thanks for the reply. I’m using CForm in a sidebar to add a little form for quick input. Right now the input boxes are misaligned and look awful. Would I be able to put divs using CForm?
$form = new CForm(array(
'elements'=>array(
'date'=>array(
'type'=>'text',
'maxlength'=>32,
),
'project'=>array(
'type'=>'dropdownlist',
'items'=>$model->getProjectOptions(),
'prompt'=>'Please select:',
),
'projectitem'=>array(
'type'=>'dropdownlist',
'items'=>$model->getProjectItemOptions(),
'label'=>'Item',
'prompt'=>'Please select:',
),
'notes'=>array(
'type'=>'textarea',
'maxlength'=>32,
),
),
'buttons'=>array(
'login'=>array(
'type'=>'submit',
'label'=>'New Time',
),
),
), $model);
echo $form;
outrage
(Site Sense Web)
May 16, 2012, 1:38pm
4
You could override the css without affecting other forms.
I’m guessing your form inputs and labels are wrapped in a div with class=“row”.
Wrap the form in a div with a class like so:
<div class="mynewclass">
your form code is here...
</div>
Now add the css
.mynewclass .row {
width:150px; /* adjust as needed */
float:left;
margin:5px !important; /* adjust as needed */
}
mchamma
(Maher Chamma)
May 17, 2012, 2:00am
5
outrage:
You could override the css without affecting other forms.
I’m guessing your form inputs and labels are wrapped in a div with class=“row”.
Wrap the form in a div with a class like so:
<div class="mynewclass">
your form code is here...
</div>
Now add the css
.mynewclass .row {
width:150px; /* adjust as needed */
float:left;
margin:5px !important; /* adjust as needed */
}
Thanks outrage. That css worked perfectly. Actually I couldn’t add the div to my CForm field input elements but was able to add the class as follows:
<div id="sidebar form">
<?php
$form = new CForm(array(
'elements'=>array(
'date'=>array(
'type'=>'text',
'maxlength'=>32,
'class' => "row",
),
'project'=>array(
'type'=>'dropdownlist',
'items'=>$model->getProjectOptions(),
'prompt'=>'Please select:',
'class' => "row",
),
'projectitem'=>array(
'type'=>'dropdownlist',
'items'=>$model->getProjectItemOptions(),
'label'=>'Item',
'prompt'=>'Please select:',
'class' => "row",
),
'notes'=>array(
'type'=>'textarea',
'maxlength'=>32,
'class' => "row",
),
),
'buttons'=>array(
'login'=>array(
'type'=>'submit',
'label'=>'New Time',
'class' => "row",
),
),
), $model);
echo $form;
?>
</div>
<?php
$this->endWidget();
?>
Didn’t know you could assign a class that way.