Pentaho Tools :

Pentaho C-Tools(CDE,CDF,CDA),Pentaho CE & EE Server,OLAP-Cubes,Analysis using Pivot4J, Saiku Analytics, Saiku Reporting, Ad-hoc Reporting using Interactive Reporting Tool,Dashboards,Reports using PRD, PDD,Data Integration using Kettle ETL,Data Mining usign WEKA,Integration of Servers with Databases,Mobile/iPad compatible Dashboards using Bootstrap Css,Drilldown dashboards,Interactive Dashboards

Wednesday, 12 March 2014

Increase/decrease the width of pentaho CDE dashboad & increase/decrese spans

Hello Guys,

With the help of a community buddy, today(12th March 2014) I have given a trail on increasing/decreasing the size of the CDE dashboard width & the increase/decrease the width of the spans.

For doing this you need to change the screen.css file
Location of the file :
G:\Pentaho\biserver-ce-4.8.0-stable\biserver-ce\pentaho-solutions\system\pentaho-cdf\js\blueprint

Look for the below code :
/* grid.css */
.container {width:950px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}

Change it as per your dashboard width requirement 
For example:
Increasing the size from 950px to 1600px
/* grid.css */
.container {width:1600px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}
Sample output

In the same way you can increase/decrease the spans sizes listed in this file
For example
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px}

Change the above as per your requirement and perform  UNIT testing.

NOTE:
Pentaho CDE/CDF layouts follows blueprint css frame work 

References :
Change dashboard total width
http://redmine.webdetails.org/issues/1744

http://ianli.com/blueprinter/?cw=30&gw=20&cc=24

http://forums.pentaho.com/showthread.php?84254-CDE-Dashboard-width

http://www.blueprintcss.org/