Good morning all.
I have successfully installed a theme from the yii themes site for mobile devices and even successfully detected mobile browsers and switched themes based on the direction. So I got all that figured out but if you notice in the image below there is a problem with the CGridView in that it doesn’t display all the fields, and the fact that the color scheme doesn’t do well either. Anyway is there a way to fix the display of the data and the theme on the CGridView?
For me, it looks like your CGridView is displaying all columns, and they just don’t fit on such small screen (notice, that last one goes beyond screen). You should change number of columns you want to display for mobile application as there isn’t much space to display all of them. Even changing font size to lower won’t help much here, because you have all-capital letters titles in header.
And for styles, you need to check, if your mobile theme has them defined differently than standard application theme. Run your application in standard browser install developers tool like Firebug and carefully check, what classes are used to build CGridView look and then modify them in a stylesheet used by your mobile browser to have CGridView drawn, like you would like it.
Hi again,
Look for CGridView.cssFile property.
In particular, To change look (styling) of your CGridView you have to:
[list=1][]Locate original CSS file, placed at \zii\widgets\assets\gridview\styles.css in your framework source directory.[]Copy all or selected styles out of it to your own CSS file (that you include in layout and use in your views / pages).[]Modify required styles or elements.[]Set cssFile property of your CGridView to FALSE.[/list]
This will force your grid to use your own styles.
With just a little bit change, you can use this method to change for example CDetailView look.
Thanks for the help, I will do exactly that, I will mock it up in TopStyle and then push it out to the grid view. I will probably use a var to set the property to false because this only is true if the browser is mobile.
Thanks again.
It is not work, could you please attach your sample project code here?
We could compare what is the difference. Thanks a lot.
