Help! Can't Change Cgridview Columns Width.

Yii 1.1 General Discussion
1

Hello! I can’t change id’s width when use ‘cssFile’=>‘css/table.css’, it’s works where no ‘cssFile’

the view code :




<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id'=>'user-grid',

	'dataProvider'=>$model->search(),

	'filter'=>$model,

	'ajaxUpdate' => true,

        'cffFile'=>'css/table.css',     // add the row can't change width

        'columns'=>array(

	     array(

		'name'=>'id',

		'htmlOptions'=>array('width'=>'30'),

		'headerHtmlOptions'=>array('width'=>'30'),		

	),

      ........

the css/table.css:




/**

 *  .items :   table's class

 *

 */

#user-grid .items

{

margin:0px;

width:100%;

text-align: left;

border-collapse: collapse;

}

#user-grid .items th

{

padding: 8px;

font-weight: bold;

font-size:12px;

color: #535E66;

background: #dde8f0; text-shadow:1px 1px #F2F8FC;

}

#user-grid .items tr.odd td

{

padding: 8px;

background: #f4f9fd;

border-top: 1px solid #fff;

color: #669;

}

#user-grid .items tr.even td

{

padding: 8px;

background: #fcfdfe;

border-top: 1px solid #fff;

color: #669;

}

#user-grid .items tfoot td

{

background: #dde8f0; font-size:11px;padding:8px 8px 8px 15px;

-moz-border-radius-bottomleft:6px;-webkit-border-bottom-left-radius:6px;-khtml-border-bottom-left-radius:6px;border-bottom-left-radius:6px;

-moz-border-radius-bottomright:6px;-webkit-border-bottom-right-radius:6px;-khtml-border-bottom-right-radius:6px;border-bottom-right-radius:6px;

}

#user-grid .items tbody tr:hover td

{

background: #dde8f0;

}

.summary{

	width:300px;

	float: left;

}

.pager{

	float:right;

}

Thanks for your help.

2

Lets go with this




'htmlOptions'=>array('style'=>'width:25%;'),
3

Try to set the width of the filter input:




        ...   

        'cffFile'=>'css/table.css',     

        'columns'=>array(

             array(

                'name'=>'id',


                 //set the width of the filter input:  

                'filterHtmlOptions'=>array('style'=>'width:30px'),            

        ),

I use this with bootstrap css, because an input has a fixed length.