Having form fields on the same line in Cactiveform

Hello everyone,

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!!

Remove the <div class =“row”> and do as you wish :)

In some views, I have rearranged the fields in a table. The class row is defined in the form.css. I suppose you may modify this if you wish…

I have tried this, while using firebug, I have multiple fields in the same div. However, they still appear on separate lines. It is almost as if they have a defined <br> between them.

Can you post your code?

Sure here is a snipit from one of my forms.


 	

	<div class="row">

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

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

		<?php 

		$this->widget('zii.widgets.jui.CJuiAutoComplete', array(

		'name'=>'PackagingMetric[room]',

		'model'=>$model,

		'source'=>array('EAST', 'WEST'),

		// additional javascript options for the autocomplete plugin

		'options'=>array(

			'minLength'=>'1',

		),

		'htmlOptions'=>array(

			'style'=>'height:20px;'

		),

		));

	?>


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

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

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

	</div>



I have tested your code and both fields are rendered on the same line. Are you sure you are not editing a file and running another?

I am editing the _form file under the view folder for my PackagingMetric model. At the current time I only have one model in this project :confused: Looking at this CSS it shows more than enough width to fit these 2 on the same line as well.

So when you run the <create> or <update>, that you see the changes are not as you wished?

add the class "wide" to div surroundign the form:


<div class="form wide">

This sort of works, but the result isn’t exactly what I had hoped by default.

Would anyone know how to rectify this through the css?

(example)

http://imgur.com/E5VVs

Still no luck on this.