← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 9840: (PT) Left menu style fixes.

 

Merge authors:
  Jan Henrik Øverland (janhenrik-overland)
------------------------------------------------------------
revno: 9840 [merge]
committer: Jan Henrik Overland <janhenrik.overland@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2013-02-19 11:53:52 +0100
message:
  (PT) Left menu style fixes.
modified:
  dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js
  dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js
  dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js	2013-02-15 11:12:39 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js	2013-02-19 10:52:09 +0000
@@ -90,7 +90,7 @@
 						items: data[name]
 					});
 				}
-				
+
 				for (var i = 0, name; i < setup.row.length; i++) {
 					name = setup.row[i];
 					config.row.push({
@@ -98,7 +98,7 @@
 						items: data[name]
 					});
 				}
-				
+
 				for (var i = 0, name; i < setup.filter.length; i++) {
 					name = setup.filter[i];
 					config.filter.push({
@@ -107,7 +107,7 @@
 					});
 				}
 			}();
-			
+
 			return config;
 		};
 
@@ -298,7 +298,7 @@
 
 		getStore = function(data) {
 			var config = {};
-				
+
 			config.fields = ['id', 'name'];
 
 			if (data) {
@@ -317,18 +317,18 @@
 					keys.push(items[i].data.id);
 				}
 			}
-			
+
 			return keys;
-		};				
+		};
 
 		dimensionStore = getStore(getData());
 
 		rowStore = getStore();
 		rowStore.add({id: 'pe', name: 'Periods'}); //i18n
-		
+
 		colStore = getStore();
 		colStore.add({id: 'dx', name: 'Data'}); //i18n
-		
+
 		filterStore = getStore();
 		filterStore.add({id: 'ou', name: 'Organisation units'}); //i18n
 
@@ -519,7 +519,7 @@
 			dimensionStore: dimensionStore,
 			rowStore: rowStore,
 			colStore: colStore,
-			filterStore: filterStore,			
+			filterStore: filterStore,
 			items: {
 				layout: 'column',
 				bodyStyle: 'border:0 none',
@@ -547,7 +547,7 @@
 			listeners: {
 				show: function(w) {
 					var x = (pt.viewport.getWidth() / 2) - (w.getWidth() / 2);
-					w.setPosition(x, 60);					
+					w.setPosition(x, 60);
 				}
 			}
 		});
@@ -666,6 +666,7 @@
 			indicator = {
 				xtype: 'panel',
 				title: '<div class="pt-panel-title-data">Indicators</div>', //i18n
+				layout: 'fit',
 				hideCollapseTool: true,
 				getData: function() {
 					var data = {
@@ -679,80 +680,84 @@
 
 					return data.items.length ? data : null;
 				},
-				items: [
-					{
-						xtype: 'combobox',
-						cls: 'pt-combo',
-						style: 'margin-bottom:8px',
-						width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
-						valueField: 'id',
-						displayField: 'name',
-						fieldLabel: 'Select group', //i18n pt.i18n.select_group
-						labelStyle: 'padding-left:7px',
-						editable: false,
-						store: {
-							xtype: 'store',
-							fields: ['id', 'name', 'index'],
-							proxy: {
-								type: 'ajax',
-								url: pt.conf.finals.ajax.path_api + pt.conf.finals.ajax.indicatorgroup_get,
-								reader: {
-									type: 'json',
-									root: 'indicatorGroups'
+				items: {
+					xtype: 'panel',
+					bodyStyle: 'border:0 none; padding:0',
+					items: [
+						{
+							xtype: 'combobox',
+							cls: 'pt-combo',
+							style: 'margin-bottom:6px',
+							width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
+							valueField: 'id',
+							displayField: 'name',
+							fieldLabel: 'Select group', //i18n pt.i18n.select_group
+							labelStyle: 'padding-left:7px',
+							editable: false,
+							store: {
+								xtype: 'store',
+								fields: ['id', 'name', 'index'],
+								proxy: {
+									type: 'ajax',
+									url: pt.conf.finals.ajax.path_api + pt.conf.finals.ajax.indicatorgroup_get,
+									reader: {
+										type: 'json',
+										root: 'indicatorGroups'
+									}
+								},
+								listeners: {
+									load: function(s) {
+										s.add({
+											id: 0,
+											name: 'All indicator groups', //i18n pt.i18n.all_indicator_groups
+											index: -1
+										});
+										s.sort([
+											{
+												property: 'index',
+												direction: 'ASC'
+											},
+											{
+												property: 'name',
+												direction: 'ASC'
+											}
+										]);
+									}
 								}
 							},
 							listeners: {
-								load: function(s) {
-									s.add({
-										id: 0,
-										name: 'All indicator groups', //i18n pt.i18n.all_indicator_groups
-										index: -1
-									});
-									s.sort([
-										{
-											property: 'index',
-											direction: 'ASC'
-										},
-										{
-											property: 'name',
-											direction: 'ASC'
-										}
-									]);
+								select: function(cb) {
+									var store = pt.store.indicatorAvailable;
+									store.parent = cb.getValue();
+
+									if (pt.util.store.containsParent(store)) {
+										pt.util.store.loadFromStorage(store);
+										pt.util.multiselect.filterAvailable(indicatorAvailable, indicatorSelected);
+									}
+									else {
+										if (cb.getValue() === 0) {
+											store.proxy.url = pt.conf.finals.ajax.path_api + pt.conf.finals.ajax.indicator_getall;
+											store.load();
+										}
+										else {
+											store.proxy.url = pt.conf.finals.ajax.path_api + pt.conf.finals.ajax.indicator_get + cb.getValue() + '.json';
+											store.load();
+										}
+									}
 								}
 							}
 						},
-						listeners: {
-							select: function(cb) {
-								var store = pt.store.indicatorAvailable;
-								store.parent = cb.getValue();
-
-								if (pt.util.store.containsParent(store)) {
-									pt.util.store.loadFromStorage(store);
-									pt.util.multiselect.filterAvailable(indicatorAvailable, indicatorSelected);
-								}
-								else {
-									if (cb.getValue() === 0) {
-										store.proxy.url = pt.conf.finals.ajax.path_api + pt.conf.finals.ajax.indicator_getall;
-										store.load();
-									}
-									else {
-										store.proxy.url = pt.conf.finals.ajax.path_api + pt.conf.finals.ajax.indicator_get + cb.getValue() + '.json';
-										store.load();
-									}
-								}
-							}
+						{
+							xtype: 'panel',
+							layout: 'column',
+							bodyStyle: 'border-style:none',
+							items: [
+								indicatorAvailable,
+								indicatorSelected
+							]
 						}
-					},
-					{
-						xtype: 'panel',
-						layout: 'column',
-						bodyStyle: 'border-style:none',
-						items: [
-							indicatorAvailable,
-							indicatorSelected
-						]
-					}
-				],
+					]
+				},
 				listeners: {
 					added: function() {
 						pt.cmp.dimension.panels.push(this);
@@ -867,7 +872,7 @@
 					{
 						xtype: 'combobox',
 						cls: 'pt-combo',
-						style: 'margin-bottom:8px',
+						style: 'margin-bottom:6px',
 						width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
 						valueField: 'id',
 						displayField: 'name',
@@ -1386,12 +1391,12 @@
 							{
 								xtype: 'combobox',
 								cls: 'pt-combo',
-								style: 'margin-bottom:8px',
-								width: 261,
+								style: 'margin-bottom:6px',
+								width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding - 62 - 62 - 7,
 								valueField: 'id',
 								displayField: 'name',
 								fieldLabel: 'Select type', //i18n pt.i18n.select_type,
-								labelStyle: 'padding-left:7px',
+								labelStyle: 'padding-left:6px',
 								editable: false,
 								queryMode: 'remote',
 								store: pt.store.periodType,
@@ -1444,7 +1449,7 @@
 					{
 						xtype: 'panel',
 						layout: 'column',
-						bodyStyle: 'border-style:none; padding-bottom:10px',
+						bodyStyle: 'border-style:none; padding-bottom:6px',
 						items: [
 							fixedPeriodAvailable,
 							fixedPeriodSelected
@@ -1470,6 +1475,7 @@
 			organisationUnit = {
 				xtype: 'panel',
 				title: '<div class="pt-panel-title-organisationunit">Organisation units</div>', //i18n pt.i18n.organisation_units
+				bodyStyle: 'padding-top:6px',
 				hideCollapseTool: true,
 				collapsed: false,
 				getData: function() {
@@ -1488,7 +1494,7 @@
 				items: [
 					{
 						layout: 'column',
-						bodyStyle: 'border:0 none; padding-bottom:4px',
+						bodyStyle: 'border:0 none; padding-bottom:3px; padding-left:3px',
 						items: [
 							{
 								xtype: 'checkbox',
@@ -1526,7 +1532,7 @@
 						id: 'organisationunit_t',
 						xtype: 'toolbar',
 						style: 'margin-bottom: 5px',
-						width: pt.conf.layout.west_fieldset_width - 18,
+						width: pt.conf.layout.west_fieldset_width - pt.conf.layout.west_width_padding,
 						xable: function(checked, value) {
 							if (checked || value) {
 								this.disable();
@@ -2005,7 +2011,7 @@
 					alert('Categories cannot be specified as filter');
 					return;
 				}
-				
+
 				return true;
 			};
 
@@ -2019,15 +2025,15 @@
 				if (!validateSpecialCases(settings)) {
 					return;
 				}
-					
+
 				if (settings) {
 					pt.util.pivot.getTable(settings, pt, centerRegion);
 				}
-			};				
+			};
 
 			accordion = {
 				xtype: 'panel',
-				bodyStyle: 'border-style:none; padding:3px;',
+				bodyStyle: 'border-style:none; padding:2px;',
 				layout: 'fit',
 				items: [
 					{
@@ -2051,11 +2057,18 @@
 
 							return panels;
 						}(),
+						listeners: {
+							added: function() {
+								pt.cmp.dimension.panel = this;
+								pacc = this;
+							}
+						}
 					}
 				],
 				listeners: {
 					added: function() {
-						pt.cmp.dimension.panel = this;
+						//pt.cmp.dimension.panel = this;
+						acc = this;
 					}
 				}
 			};
@@ -2084,10 +2097,10 @@
 								var text = b.getText();
 								text = text === '<<<' ? '>>>' : '<<<';
 								b.setText(text);
-								
+
 								westRegion.toggleCollapse();
 							}
-						},								
+						},
 						{
 							text: 'Settings',
 							handler: function() {
@@ -2105,6 +2118,63 @@
 							}
 						}
 					]
+				},
+				listeners: {
+					afterrender: function(p) {
+						//var top,
+							//left,
+							//width,
+							//height,
+							//fixedElStyle,
+							//setFixed = function(item, i) {
+								//if (!item.hasCls('fixed')) {
+									//item.addCls('fixed');
+									//item.setTop(fixedElStyle[i].top + 'px');
+									//item.setLeft(fixedElStyle[i].left + 'px');
+									//item.setWidth(fixedElStyle[i].width + 'px');
+									//item.setHeight(fixedElStyle[i].height + 'px');
+
+									//if (i > 0) {
+										//item.setStyle('border-left', 0);
+									//}
+
+								//}
+							//};
+
+						//p.body.dom.addEventListener('scroll', function() {
+							//var fixedEl = document.getElementsByClassName('scroll-fixed-tr'),
+								//relativeEl = document.getElementsByClassName('scroll-relative'),
+								//relativeElStyle	= [],
+								//el;
+
+							//fixedElStyle = [];
+
+							//for (var i = 0; i < fixedEl.length; i++) {
+								////alert(Ext.get(relativeEl[i]).getWidth());
+								//el = Ext.get(fixedEl[i]);
+								//fixedElStyle.push({
+									//top: el.getTop() + 1,
+									//left: el.getLeft(),
+									//width: el.getWidth(),
+									//height: el.getHeight()
+								//});
+							//}
+
+							//for (var i = 0; i < relativeEl.length; i++) {
+								////alert(Ext.get(relativeEl[i]).getWidth());
+								//relativeElStyle.push(Ext.get(relativeEl[i]).getWidth());
+							//}
+
+							//for (var i = 0; i < fixedEl.length; i++) {
+								//setFixed(Ext.get(fixedEl[i]), i);
+							//}
+
+							//for (var i = 0; i < relativeEl.length; i++) {
+								////alert(Ext.get(relativeEl[i]).getWidth());
+								//Ext.get(relativeEl[i]).setWidth(relativeElStyle[i]);
+							//}
+						//});
+					}
 				}
 			});
 

=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js	2013-02-15 12:37:39 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js	2013-02-19 10:52:09 +0000
@@ -124,20 +124,17 @@
 	conf.layout = {
         west_width: 424,
         west_fieldset_width: 416,
-        west_width_padding: 18,
-        west_fill: 117,
-        west_fill_accordion_indicator: 77,
-        west_fill_accordion_dataelement: 77,
-        west_fill_accordion_dataset: 45,
-        west_fill_accordion_period: 270,
-        //west_fill_accordion_fixedperiod: 77,
+        west_width_padding: 12,
+        west_fill: 6,
+        west_fill_accordion_indicator: 74,
+        west_fill_accordion_dataelement: 74,
+        west_fill_accordion_dataset: 44,
+        west_fill_accordion_period: 264,
         west_fill_accordion_organisationunit: 103,
-        west_maxheight_accordion_indicator: 478,
-        west_maxheight_accordion_dataelement: 478,
-        west_maxheight_accordion_dataset: 478,
+        west_maxheight_accordion_indicator: 500,
+        west_maxheight_accordion_dataelement: 500,
+        west_maxheight_accordion_dataset: 500,
         west_maxheight_accordion_period: 700,
-        //west_maxheight_accordion_relativeperiod: 423,
-        //west_maxheight_accordion_fixedperiod: 478,
         west_maxheight_accordion_organisationunit: 756,
         west_maxheight_accordion_organisationunitgroup: 298,
         west_maxheight_accordion_options: 449,
@@ -320,7 +317,7 @@
 		showMask: function(cmp, msg) {
 			cmp = cmp || pt.viewport;
 			msg = msg || 'Loading..';
-			
+
 			if (pt.viewport.mask) {
 				pt.viewport.mask.destroy();
 			}
@@ -432,11 +429,11 @@
 				addDimensions = function() {
 					xSettings.dimensions = [].concat(Ext.clone(xSettings.col) || [], Ext.clone(xSettings.row) || []);
 				}();
-				
+
 				addDimensionNames = function() {
 					var a = [],
 						dimensions = Ext.clone(xSettings.dimensions) || [];
-					
+
 					for (var i = 0; i < dimensions.length; i++) {
 						a.push(dimensions[i].name);
 					}
@@ -459,18 +456,18 @@
 					for (var i = 0, dim; i < dimensions.length; i++) {
 						dim = dimensions[i];
 
-						map[dim.name] = dim.items || [];						
+						map[dim.name] = dim.items || [];
 					}
-					
+
 					xSettings.nameItemsMap = map;
 				}();
-				
+
 				return xSettings;
 			};
 
 			getSyncronizedXSettings = function(xSettings, response) {
 				var getHeaderNames,
-				
+
 					headerNames,
 					newSettings;
 
@@ -490,7 +487,7 @@
 					getAxis = function(axis) {
 						var axis = Ext.clone(axis),
 							dimension;
-						
+
 						for (var i = 0; i < axis.length; i++) {
 							if (axis[i].name === dimensionName) {
 								dimension = axis[i];
@@ -512,15 +509,15 @@
 					}
 					if (settings.filter) {
 						settings.filter = getAxis(settings.filter);
-					}						
+					}
 				};
-				
+
 				headerNames = getHeaderNames();
-				
+
 				// remove coc from settings if it does not exist in response
 				if (Ext.Array.contains(xSettings.dimensionNames, 'coc') && !(Ext.Array.contains(headerNames, 'coc'))) {
 					removeDimensionFromSettings('coc');
-					
+
 					newSettings = pt.api.Settings(settings);
 
 					if (!newSettings) {
@@ -533,11 +530,11 @@
 					return xSettings;
 				}
 			};
-				
+
 			getParamString = function(xSettings) {
 				var sortedDimensions = xSettings.sortedDimensions,
 					sortedFilterDimensions = xSettings.sortedFilterDimensions,
-					paramString = '?';				
+					paramString = '?';
 
 				for (var i = 0, sortedDim; i < sortedDimensions.length; i++) {
 					sortedDim = sortedDimensions[i];
@@ -556,7 +553,7 @@
 				if (sortedFilterDimensions) {
 					for (var i = 0, sortedFilterDim; i < sortedFilterDimensions.length; i++) {
 						sortedFilterDim = sortedFilterDimensions[i];
-						
+
 						paramString += '&filter=' + sortedFilterDim.name + ':' + sortedFilterDim.items.join(';');
 					}
 				}
@@ -574,7 +571,7 @@
 					alert('Data invalid');
 					return false;
 				}
-				
+
 				if (!(Ext.isNumber(response.width) && response.width > 0 &&
 					  Ext.isNumber(response.height) && response.height > 0 &&
 					  Ext.isArray(response.rows) && response.rows.length > 0)) {
@@ -589,7 +586,7 @@
 
 				return true;
 			};
-		
+
 			extendResponse = function(response, xSettings) {
 				var headers = response.headers,
 					metaData = response.metaData,
@@ -618,8 +615,8 @@
 							}
 
 							responseItems = Ext.Array.unique(responseItems);
-							
-							if (settingsItems.length) {							
+
+							if (settingsItems.length) {
 								for (var j = 0, item; j < settingsItems.length; j++) {
 									item = settingsItems[j];
 
@@ -682,8 +679,8 @@
 			extendAxis = function(axis, xResponse) {
 				if (!axis || (Ext.isArray(axis) && !axis.length)) {
 					return;
-				}		
-				
+				}
+
 				var axis = Ext.clone(axis),
 					nCols = 1,
 					aNumCols = [],
@@ -693,13 +690,13 @@
 					aAllItems = [],
 					aColIds = [],
 					aUniqueIds;
-					
+
 				aUniqueIds = function() {
 					var a = [];
 
 					for (var i = 0, dim; i < axis.length; i++) {
 						dim = axis[i];
-						
+
 						a.push(xResponse.nameHeaderMap[dim.name].items);
 					}
 
@@ -814,7 +811,7 @@
 				if (!rowAxis || (Ext.isArray(rowAxis) && !rowAxis.length)) {
 					return;
 				}
-					
+
 				var xRowAxis = extendAxis(rowAxis, xResponse),
 					all = xRowAxis.xItems.all,
 					allObjects = [];
@@ -861,19 +858,19 @@
 
 				getEmptyHtmlArray = function() {
 					return (xColAxis && xRowAxis) ?
-						'<td class="pivot-empty" colspan="' + xRowAxis.dims + '" rowspan="' + xColAxis.dims + '"></td>' : '';
+						'<td class="pivot-empty scroll-fixed" colspan="' + xRowAxis.dims + '" rowspan="' + xColAxis.dims + '"></td>' : '';
 				};
 
 				getColAxisHtmlArray = function() {
 					var a = [],
 						dims;
-					
+
 					if (!(xColAxis && Ext.isObject(xColAxis))) {
 						return a;
 					}
 
 					dims = xColAxis.dims;
-					
+
 					for (var i = 0, dimItems, colSpan, dimHtml; i < dims; i++) {
 						dimItems = xColAxis.xItems.gui[i];
 						colSpan = xColAxis.span[i];
@@ -884,11 +881,11 @@
 						}
 
 						for (var j = 0, id; j < dimItems.length; j++) {
-							id = dimItems[j];						
-							dimHtml.push('<td class="pivot-dim" colspan="' + colSpan + '">' + xResponse.metaData[id] + '</td>');
+							id = dimItems[j];
+							dimHtml.push('<td class="pivot-dim scroll-fixed" colspan="' + colSpan + '">' + xResponse.metaData[id] + '</td>');
 
 							if (i === 0 && j === (dimItems.length - 1)) {
-								dimHtml.push('<td class="pivot-dimtotal" rowspan="' + dims + '">Total</td>');
+								dimHtml.push('<td class="pivot-dimtotal scroll-fixed" rowspan="' + dims + '">Total</td>');
 							}
 						}
 
@@ -916,12 +913,12 @@
 					// Dim html items
 					for (var i = 0, row; i < size; i++) {
 						row = [];
-						
+
 						for (var j = 0, object; j < dims; j++) {
 							object = allObjects[j][i];
 
 							if (object.rowSpan) {
-								row.push('<td class="pivot-dim" rowspan="' + object.rowSpan + '">' + xResponse.metaData[object.id] + '</td>');
+								row.push('<td class="pivot-dim scroll-relative" rowspan="' + object.rowSpan + '">' + xResponse.metaData[object.id] + '</td>');
 							}
 						}
 
@@ -935,14 +932,14 @@
 					var a = [],
 						htmlValueItems = [],
 						colSize = xColAxis ? xColAxis.size : 1,
-						rowSize = xRowAxis ? xRowAxis.size : 1;						
+						rowSize = xRowAxis ? xRowAxis.size : 1;
 
 					// Value items
 					for (var i = 0, valueItemRow, htmlValueItemRow; i < rowSize; i++) {
 						valueItemRow = [];
 						htmlValueItemRow = [];
 
-						for (var j = 0, id, value; j < colSize; j++) {						
+						for (var j = 0, id, value; j < colSize; j++) {
 							id = (xColAxis ? xColAxis.ids[j] : '') + (xRowAxis ? xRowAxis.ids[i] : '');
 							value = xResponse.idValueMap[id] ? parseFloat(xResponse.idValueMap[id]) : 0; //todo
 							htmlValue = xResponse.idValueMap[id] ? parseFloat(xResponse.idValueMap[id]) : '-'; //todo
@@ -966,7 +963,7 @@
 								//cls = value < 5000 ? 'bad' : (value < 20000 ? 'medium' : 'good'); //basic legendset
 							//}
 
-							row.push('<td id="' + item.id + '" class="pivot-value">' + item.value + '</td>');
+							row.push('<td id="' + item.id + '" class="pivot-value scroll-relative">' + item.value + '</td>');
 						}
 
 						a.push(row);
@@ -980,7 +977,7 @@
 						a = [];
 
 					if (xColAxis) {
-							
+
 						// Total row items
 						for (var i = 0, rowSum; i < valueItems.length; i++) {
 							rowSum = Ext.Array.sum(valueItems[i]);
@@ -989,10 +986,10 @@
 
 						// Total row html items
 						for (var i = 0, rowSum; i < totalRowItems.length; i++) {
-							rowSum = totalRowItems[i];							
+							rowSum = totalRowItems[i];
 							rowSum = pt.util.number.roundIf(rowSum, 1);
 
-							a.push(['<td id="nissa" class="pivot-valuetotal">' + rowSum.toString() + '</td>']);
+							a.push(['<td id="nissa" class="pivot-valuetotal scroll-relative">' + rowSum.toString() + '</td>']);
 						}
 					}
 
@@ -1012,7 +1009,7 @@
 							for (var j = 0; j < valueItems.length; j++) {
 								colSum += valueItems[j][i];
 							}
-							
+
 							totalColItems.push(colSum);
 						}
 
@@ -1021,7 +1018,7 @@
 							colSum = totalColItems[i];
 							colSum = pt.util.number.roundIf(colSum, 1);
 
-							a.push('<td class="pivot-valuetotal">' + colSum.toString() + '</td>');
+							a.push('<td class="pivot-valuetotal scroll-relative">' + colSum.toString() + '</td>');
 						}
 					}
 
@@ -1036,7 +1033,7 @@
 						grandTotalSum = Ext.Array.sum(totalColItems) || 0;
 						grandTotalSum = pt.util.number.roundIf(grandTotalSum, 1);
 
-						a.push('<td class="pivot-valuegrandtotal">' + grandTotalSum.toString() + '</td>');
+						a.push('<td class="pivot-valuegrandtotal scroll-relative">' + grandTotalSum.toString() + '</td>');
 					}
 
 					return a;
@@ -1066,11 +1063,11 @@
 						a = [];
 
 					if (xRowAxis) {
-						dimTotalArray = ['<td class="pivot-dimtotal" colspan="' + xRowAxis.dims + '">Total</td>'];
+						dimTotalArray = ['<td class="pivot-dimtotal scroll-relative" colspan="' + xRowAxis.dims + '">Total</td>'];
 					}
 
 					row = [].concat(dimTotalArray || [], Ext.clone(colTotal) || [], Ext.clone(grandTotal) || []);
-					
+
 					a.push(row);
 
 					return a;
@@ -1080,14 +1077,19 @@
 					var s = '<table id="pivottable" class="pivot">';
 
 					for (var i = 0; i < htmlArray.length; i++) {
-						s += '<tr>' + htmlArray[i].join('') + '</tr>';
+						if (i < 2) {
+							s += '<tr class="scroll-fixed-tr">' + htmlArray[i].join('') + '</tr>';
+						}
+						else {
+							s += '<tr>' + htmlArray[i].join('') + '</tr>';
+						}
 					}
 
 					s += '</table>';
 
 					return s;
-				};					
-				
+				};
+
 				htmlArray = [].concat(getColAxisHtmlArray(), getRowHtmlArray(), getTotalHtmlArray());
 				htmlArray = Ext.Array.clean(htmlArray);
 
@@ -1101,7 +1103,7 @@
 					html: html
 				});
 			};
-			
+
 			initialize = function() {
 				var xSettings,
 					xResponse,
@@ -1109,7 +1111,7 @@
 					xRowAxis;
 
 				pt.util.mask.showMask(container);
-				
+
 
 				xSettings = extendSettings(settings);
 
@@ -1125,7 +1127,7 @@
 					failure: function() {
 						pt.util.mask.hideMask();
 						alert('Data request failed');
-					},						
+					},
 					success: function(response) {
 						var html,
 							el;
@@ -1150,19 +1152,19 @@
 
 						xColAxis = extendAxis(xSettings.col, xResponse);
 						xRowAxis = extendRowAxis(xSettings.row, xResponse);
-						
+
 						html = getTableHtml(xColAxis, xRowAxis, xResponse);
 
 						if (!pt.el && container) {
 							el = Ext.get('pivottable');
-							
+
 							if (el) {
 								el.destroy();
 							}
-														
+
 							container.update(html);
 						}
-						
+
 						pt.util.mask.hideMask();
 					}
 				});
@@ -1190,11 +1192,11 @@
 			if (!axis) {
 				return;
 			}
-			
+
 			for (var i = 0, dimension, remove; i < axis.length; i++) {
 				remove = false;
 				dimension = axis[i];
-				
+
 				if (dimension.name !== 'coc') {
 					if (!(Ext.isArray(dimension.items) && dimension.items.length)) {
 						remove = true;
@@ -1229,7 +1231,7 @@
 					return;
 				}
 			}
-			
+
 			axis = removeEmptyDimensions(axis);
 
 			return axis.length ? axis : null;
@@ -1237,8 +1239,8 @@
 
 		validateSettings = function() {
 			var a = [].concat(Ext.clone(col), Ext.clone(row), Ext.clone(filter)),
-				names = [];			
-			
+				names = [];
+
 			if (!(col || row)) {
 				alert('No column or row dimensions selected'); //i18n
 				return;
@@ -1259,25 +1261,25 @@
 				alert('At least one period must be specified as column, row or filter');
 				return;
 			}
-			
+
 			return true;
 		};
-		
+
 		return function() {
 			var obj = {};
-			
+
 			if (!(config && Ext.isObject(config))) {
 				alert('Settings config is not an object'); //i18n
 				return;
 			}
-			
+
 			col = getValidatedAxis(config.col);
 			row = getValidatedAxis(config.row);
 			filter = getValidatedAxis(config.filter);
 
 			if (!validateSettings()) {
 				return;
-			}			
+			}
 
 			if (col) {
 				obj.col = col;

=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css	2013-02-11 08:42:04 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css	2013-02-19 10:52:09 +0000
@@ -70,6 +70,9 @@
     display: none;
 }
 
+.fixed {
+	position: fixed;
+}
 
 /*----------------------------------------------------------------------------
  * Pivot
@@ -764,7 +767,7 @@
 
 	/* accordion item body */
 .pt-accordion .x-accordion-body {
-	padding: 8px 8px 2px 8px;
+	padding: 8px 6px 0px 6px;
 	border-top: 1px solid #c5c5c5 !important;
 }