CForm and Tabular display

ankunda · July 18, 2011, 9:54am

Hello,

I am trying to use CForm builder for my form creation and i need a way to display the form data in a tabular manner. How can i apply div tags to the CForm array?

SOme of my code is below

public function getForm() {

	return new CForm(array(


		'showErrorSummary'=&gt;true,


		'elements'=&gt;array(


			


			'FirstName'=&gt;array(


				'hint'=&gt;'6-12 characters; letters, numbers, and underscore'


			),








			'LastName'=&gt;array(


				'hint'=&gt;'6-12 characters; letters, numbers, and underscore'


			),

What i want is for FirstName and LastName to appear on the same row. How can i realise this with CForm builder

bettor · July 18, 2011, 10:31am

have you tried to override the css for the divs

ankunda · July 18, 2011, 10:55am

This is my div in css

div.form

{

margin: 0 0 10px 40px;

}

.div-tab{display:table; border:1px solid #003399;}

.div-tab-caption{display:table-caption; background:#009999;}

.div-tab-row{display:table-row;}

.div-tab-col{display:table-cell; padding: 5px; border: 1px solid #003399;}

My Form is now generated using this

public function getForm() {

	return new CForm(array(


		'showErrorSummary'=&gt;true,


		'elements'=&gt;array(


			'&lt;div class=&quot;div-tab&quot;&gt;&lt;div class=&quot;div-tab-row&quot;&gt;&lt;div class=&quot;div-tab-col&quot;&gt;'.


			'FirstName'=&gt;array(


				'hint'=&gt;'6-12 characters; letters, numbers, and underscore'


			).'&lt;/div&gt;&lt;div id=&quot;div-tab-col&quot;&gt;',


                            'LastName'=&gt;array(


				'hint'=&gt;'6-12 characters; letters, numbers, and underscore; mixed case and at least 1 digit',


			).'&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;',

What am i getting wrong cause the browser isn’t displaying items? Text boxes are not showing at all. I only see the word Array twice.

qianggan · June 21, 2013, 4:37pm

It should be easy fix, see code below.




public function getForm() {

return new CForm(array(

'showErrorSummary'=>true,

'elements'=>array(

'<div class="div-tab"><div class="div-tab-row"><div class="div-tab-col">',

'FirstName'=>array(

'hint'=>'6-12 characters; letters, numbers, and underscore'

),

'</div><div id="div-tab-col">',

'LastName'=>array(

'hint'=>'6-12 characters; letters, numbers, and underscore; mixed case and at least 1 digit',

),

'</div></div></div>',

...