Yii Framework Forum: Somehow I can't change the column size in CGridView - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Somehow I can't change the column size in CGridView Rate Topic: -----

#1 User is offline   CoLT 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 246
  • Joined: 22-November 09

Posted 06 May 2010 - 09:51 AM

Somehow I can't change the specific column size in CGridView, trying:

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'course-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'columns'=>array(
...

		array(
            'name'=>'CrSun',
            'value'=>'$data->CrSun?Yii::t("App","Yes"):Yii::t("App","No")',
            'filter'=>array('0'=>Yii::t("App","No"),'1'=>Yii::t("App","Yes")),
	    'headerHtmlOptions'=>array('size'=>10), //maybe I'm missing something?
	    'htmlOptions'=>array('size'=>10),
        ),
...

        	'CrInfo',
		'CrComm',
		array(
			'class'=>'CButtonColumn',
		),
	),
)); ?>


Thanks

CoLT
2

#2 User is offline   Jaz Manister 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 109
  • Joined: 27-October 09
  • Location:Rural Western New York, USA

Posted 06 May 2010 - 11:03 AM

*
POPULAR

Just use width, not size:
'columns'=>array(
  array(
    'name'=>'name',
    'value'=>'asdf',
    'htmlOptions'=>array('width'=>'40px'),
  ),

8

#3 User is offline   CoLT 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 246
  • Joined: 22-November 09

Posted 06 May 2010 - 11:40 AM

View PostJaz Manister, on 06 May 2010 - 11:03 AM, said:

Just use width, not size:
'columns'=>array(
  array(
    'name'=>'name',
    'value'=>'asdf',
    'htmlOptions'=>array('width'=>'40px'),
  ),



Hm, that does not work too.
0

#4 User is offline   Y!! 

  • Advanced Member
  • Yii
  • Group: Yii Dev Team
  • Posts: 978
  • Joined: 18-June 09

Posted 06 May 2010 - 11:41 AM

View PostCoLT, on 06 May 2010 - 11:40 AM, said:

Hm, that does not work too.


"px" is only for css and not for direct html attributes. Take that away and it should work.
3

#5 User is offline   Jaz Manister 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 109
  • Joined: 27-October 09
  • Location:Rural Western New York, USA

Posted 06 May 2010 - 12:24 PM

View PostY!!, on 06 May 2010 - 11:41 AM, said:

"px" is only for css and not for direct html attributes. Take that away and it should work.


Yeah, you're right about that. But this works for me both ways.. not sure why. I tried it as 'htmlOptions'=>array('style'=>'width:80px') and that works.. but I think an even better way to do it would be just to add it to the header column and not every column via 'headerHtmlOptions'. This is sort of the quick and dirty way of doing things.

I did this other technique yesterday day by specifying a special css file for the CGridView. I'm not sure if I have the best way of doing this, because when I first did it I lost all styling, so I made a copy of the CGridView style.css file in my project css directory and then referenced the column header id with a specific width.

//grid view 
$this->widget('zii.widgets.grid.CGridView', array(
 'dataProvider'=>$dataProvider,
 'id'=>'mygridview',
 'cssFile'=>'/myapp/css/mystyle.css',


mystyle.css (complete copy of style.css from framework directory)
added the following:

#mygridview_c2 { width: 80px; }

1

#6 User is offline   CoLT 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 246
  • Joined: 22-November 09

Posted 06 May 2010 - 12:33 PM

Still no effect.. :)

In any of mentioned options column remains untouched.

CoLT
0

#7 User is offline   Jaz Manister 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 109
  • Joined: 27-October 09
  • Location:Rural Western New York, USA

Posted 06 May 2010 - 12:41 PM

View PostCoLT, on 06 May 2010 - 12:33 PM, said:

Still no effect.. :)

In any of mentioned options column remains untouched.

CoLT



Can you see the changes coming through if you inspect with firebug? If you use the htmlOptions thing, you should see something like <th style="width:80px"> or if you went the css file, you would see it in the style area of firebug.. whatever you're using, does it show up upon inspection?
0

#8 User is offline   CoLT 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 246
  • Joined: 22-November 09

Posted 06 May 2010 - 01:03 PM

View PostJaz Manister, on 06 May 2010 - 12:41 PM, said:

Can you see the changes coming through if you inspect with firebug? If you use the htmlOptions thing, you should see something like <th style="width:80px"> or if you went the css file, you would see it in the style area of firebug.. whatever you're using, does it show up upon inspection?

Nope, no changes at all (inspected with Firebug)

Can't find out why :)

[edit]
I see changes, I had commented it temporarily.

But table does not move an inch :)

[edit]
I noticed the GridView goes under the default borders - this is the reason why it ignores width. But I believe it still should listen to params, as other grids need to be smaller.

Any ideas?

CoLT

This post has been edited by CoLT: 06 May 2010 - 01:12 PM

0

#9 User is offline   tri 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,651
  • Joined: 20-November 08
  • Location:Stockholm, Sweden

Posted 18 May 2010 - 09:40 PM

View PostCoLT, on 06 May 2010 - 01:03 PM, said:

...
Any ideas?

CoLT


With my own (simple) grid I ended up with a row of <col> tags for better control of width and alignment. (Can't recall the reason it didn't work well with <th>, perhaps the left/right alignment or need for fixed column width.)

Not obvious how to accomplish that by extending CGridview, though.

Example
<table>
  <col class="col1"></col><col class="col2"></col>
  <tr>
  <th>header1</th><th>header1</th>
  ...

/Tommy
Don't forget to read The Definitive Guide to Yii (en) (sv) | The class reference has the details
0

#10 User is offline   sn0rcha 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 28
  • Joined: 22-June 09

Posted 19 May 2010 - 01:24 AM

Is there a way to add a url to an image type column, or have an image with a link in any of the other types of columns?.. I can not for the life of me figure out how to display an image in a column in CGridview and have it link somewhere..

Here is my column code;

        array('name'=>'Image','type'=>'image','value'=>'Yii::app()->controller->createUrl("fileReader/getImage",array("id"=>$data->photos_id,"type"=>"photos","f"=>"thumb_$data->photos_file"))'),


I've tried creating the html for a link using CHtml::link and CHtml::image in all options for the column format, but it never works...

Any ideas?
0

#11 User is offline   sn0rcha 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 28
  • Joined: 22-June 09

Posted 19 May 2010 - 02:24 AM

View Postsn0rcha, on 19 May 2010 - 01:24 AM, said:

Is there a way to add a url to an image type column, or have an image with a link in any of the other types of columns?.. I can not for the life of me figure out how to display an image in a column in CGridview and have it link somewhere..

Here is my column code;

        array('name'=>'Image','type'=>'image','value'=>'Yii::app()->controller->createUrl("fileReader/getImage",array("id"=>$data->photos_id,"type"=>"photos","f"=>"thumb_$data->photos_file"))'),


I've tried creating the html for a link using CHtml::link and CHtml::image in all options for the column format, but it never works...

Any ideas?



Doh, disregard that post.. got it working like this:

					 array('name'=>'Pic','type'=>'raw','value'=>'CHtml::link(CHtml::image(Yii::app()->controller->createUrl("fileReader/getImage",array("id"=>$data->photos_id,"type"=>"photos","f"=>"thumb_$data->photos_file"))),Yii::app()->controller->createUrl("photos/update",array("id"=>$data->photos_id)))'),


hope it helps someone.
0

#12 User is offline   Theill11 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 51
  • Joined: 03-March 10
  • Location:@ localhost

Posted 19 May 2010 - 05:15 PM

What about
htmlOptions => array('style'=>'width:40px;');

1

#13 User is offline   Rafal_P 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 30-July 10

Posted 30 July 2010 - 09:17 AM

Quote

'columns'=>array(
array(
'name'=>'name',
'value'=>'asdf',
'htmlOptions'=>array('width'=>'40'),
),


This works great for me ( its without px like say Y!!).

thanks & GL :)
0

#14 User is offline   GSTAR 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,003
  • Joined: 30-October 09
  • Location:UK

Posted 30 July 2010 - 03:35 PM

OR how about:

.grid-view table.items th
{
	width: 40px;
}

In your custom CSS / form.css file.
1

#15 User is offline   volkmar 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 14-June 10
  • Location:Germany

Posted 20 October 2010 - 01:16 PM

I had the same problem.

Try out "headerHtmlOptions" with the same configuration such like htmlOptions!!!
That works!
nothing have to be
0

#16 User is offline   diggy 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 112
  • Joined: 18-November 09
  • Location:Ukraine, Khmelnitsky

Posted 20 October 2010 - 03:04 PM

View PostKomodo, on 19 May 2010 - 05:15 PM, said:

What about
htmlOptions => array('style'=>'width:40px;');



This could work. I have use mostly this way to change size of columns.
0

#17 User is offline   fouss 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 384
  • Joined: 05-October 10
  • Location:Bamako Mali

Posted 03 February 2011 - 11:20 AM

View Postdiggy, on 20 October 2010 - 03:04 PM, said:

This could work. I have use mostly this way to change size of columns.


I tryed all th method listed here but any is working width my CGridView
Posted Image
0

#18 User is offline   fouss 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 384
  • Joined: 05-October 10
  • Location:Bamako Mali

Posted 07 February 2011 - 06:27 AM

View Postfouss, on 03 February 2011 - 11:20 AM, said:

I tryed all th method listed here but any is working width my CGridView


Any idea?
Posted Image
0

#19 User is offline   GoorooTech 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 19-June 10
  • Location:Alstonville, NSW, Australia

Posted 17 March 2011 - 01:58 AM

View Postfouss, on 07 February 2011 - 06:27 AM, said:

Any idea?


I also was trying to control button column widths etc via CSS and found I also had similar troubles to the above posts. I found out a few things that stopped my custom CSS from working.

1/ make sure your path is correct in the cssFile parameter!! (as mentioned in previous posts!)

2/ Multiple cgridviews in the same view - I found I had to set ALL cgridviews to my custom CSS otherwise I would get the situation that the default styles.css would be loaded as well as my custom CSS (ie. 'gridview.css') but styles.css would take precedence over my custom gridview.css and thus would never show my changed style.

$this->widget('zii.widgets.grid.CGridView', array(
		'dataProvider'=>$jobs,
		'cssFile'=>'/jobsys/css/gridview.css',
		'columns'=>array(
					'id',
...



Hope it helps people!
Jason
0

#20 User is offline   wsmits 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 24-January 11

Posted 29 April 2011 - 07:48 AM

I think the problem is with the filter text boxes.
I have a similar problem in my gridview.
'id'=>'user-grid',
      'showSummary'=>false,
      'dataProvider'=>$model->search(),
      'cssFile' => Yii::app()->theme->baseUrl . '/css/gridView.css',
      'filter'=>$model,
      'emptyText' => 'Nog geen gebruikers aangemaakt',
      'columns'=>array(
         array(
          'name'=>'id',
          'htmlOptions'=>array('width'=>'40'),
        ),
        'first_name',
        'last_name',
        'email',


As you can see, I have added
'htmlOptions'=>array('width'=>'40'),
to the ID column. This doesn't seem to work because the text boxes in the filter row are not getting a smaller size.

When I remove
 'filter'=>$model,
then the resizing works well.

I need to figure out how to add a class to each individual filter textbox to let this resizing work.
3

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

4 User(s) are reading this topic
0 members, 4 guests, 0 anonymous users