The default width of the grid (manage) view is just wide enough to show the 10 or so fields I have now. However, I need to add several more fields to the table, all of which I need to display, which means the current grid view won’t be wide enough to display everything.
I’ve looked for how to modify the CSS style sheet package to greater than ~950 pixel width, but I haven’t found any useful information on how to do it.
Anybody got ideas on how to widen the grid/manage view? Or, are there any extensions or tools which let people expand/collapse columns, or pick which columns to display? I looked, but didn’t find anything.
Thanks for the reply. I see in screen.css where the container is set to max 950px. But the maximum span-24 goes up to 950px.
This is where my knowledge of CSS and CSS frameworks is nonexistant…is there something simple I can do to increase the container and/or span widths beyond 950px? Most everybody on my team is running 1920 width monitors. Could I simply recalculate the container and all the span widths to be ~1900 max, with similar increments? Or is that going to break something? (my gut tells me it’ll break something).
Lastly, if I do modify this, is screen.css the only file I’d need to modify?
Thanks!
EDIT: I downloaded the latest Blueprint CSS framework, and ran the compress.rb script as follows:
Gutter width and number of columns stayed the same as the original version, but the column width increased from 30 to 68px, resulting in a new width of 1862px, or just shy of 1920.
However, when I replaced the old screen.css with the new one, I don’t see any changes in grid width. I’m looking over my “view” files, and I don’t see any width options anywhere.
Is there something in the cGridView widget that defaults or is hard-coded to 950px?
Even after I modified the Blueprint CSS files (in my last post) and replaced the screen.css file with the new one, I didn’t see any changes in the grid view. I also deleted everything in the assets folder, as there were some .css files in there, and thought perhaps assets needed to be updated. But the grid view is still limited to 950px width (even though my new screen.css is wider now).
I’ve looked through every file I can think of that’s relevant, and I still can’t find how the grid/manage view is invoking CSS, or which CSS file, to prepare the view.
Can anybody help with this? 950px is far too narrow to display the additional fields I need. I really need to expand this thing to ~1920 width.
Thanks!
EDIT: I even renamed the screen.css file to screen.css.NOTHING to see if the lack of the screen.css file made any difference, and it didn’t. It looks like it’s not even used, at least not during runtime (and it’s not appearing anywhere in the assets folder either).
Turns out the browser was caching the old screen.css data. When I refreshed everything, it worked, and the new grid/manage view uses the entire width of the screen now.
To recap for the benefit of anybody else who needs to widen their display:
Download the Blueprint CSS framework from http://www.blueprintcss.org. I uncompressed it to a CENTOS box I have.
Make sure Ruby and rubygems are installed. I used Ruby 1.9.2p290 which included gem 1.3.7.
If you happen to be using CENTOS 5.5 (which is what I was using), the latest Ruby/rubygems aren’t in the repository. I found and followed this guide, which was helpful: http://www.freshblurbs.com/install-ruby-1-9-centos
When running the script, you might get a couple errors on installing additional components. For me, the commands I needed to run were "gem install bundler" and "bundle install --without test".
Figure out how many columns you need, the column width, and the gutter width. The defaults are:
column_width=30
gutter_width=10
column_count=24
The new values I wanted to use were:
column_width=68
gutter_width=10
column_count=24
I kept the gutter width and column count the same (so as to not interfere with existing spanning), and just increased the column count. The total pixel width is now 1862 with these values, or just shy of my 1920 wide displays.
Recompress the Blueprint CSS files by running the compress.rb script in the "lib" folder as follows:
Take the new ie.css, print.css, and screen.css files and copy them to the "css" folder under your yii project.
NOTE: This step is probably optional, but I did it anyway. I deleted any references to the three files under the project’s “assets” folder.
Bring up your project in a browser, and be sure and refresh/reload so it loads the new screen.css file.
Please note that changing the screen.css like this seems to change every view/page, not just the grid/manage views. Although my grids are now wider, and take up the full width of the screen, I need to go in and probably adjust some of the spanning values in the views. Some items, like HTML table columns, are far too wide now, and I need to adjust them, or the spanning.
Anyway, I hope all this helps somebody in a similar situation as mine, in needing to increase the width of the views.
