Better usage for relative column width:

- Columns with relative width specified in template are kept relative in resize
 - Columns with no width specified in template get any left over space (relative)
 - Columns with fixed width specified in template are kept fixed
These three together mean that if the user resizes the window or adds/removes columns, fixed columns don't change and any space is divided among relative columns.

etemplate/js/et2_dataview.js

@@ -386,7 +386,7 @@ var et2_dataview = Class.extend({
 			// make column resizable
 			var enc_column = self.columnMgr.getColumnById(col.id);
 			et2_dataview_makeResizeable(column, function(_w) {
-					this.set_width(_w + "px");
+					this.set_width(this.relativeWidth ? (_w / self.columnMgr.totalWidth * 100) + "%" : _w + "px");
 					self.columnMgr.updated = true;
 					self.updateColumns();
 			}, enc_column);

etemplate/js/et2_dataview_model_columns.js

@@ -299,6 +299,7 @@ var et2_dataview_columns = Class.extend({
 		// Calculate how many space is - relatively - not occupied with columns with
 		// relative or fixed width
 		var remRelWidth = 1;
+		var fixedTotal = 0;
 		var noWidthCount = 0;
 
 		for (var i = 0; i < this.columns.length; i++)
@@ -312,7 +313,7 @@ var et2_dataview_columns = Class.extend({
 				}
 				else if (col.fixedWidth)
 				{
-					remRelWidth -= col.fixedWidth / tw;
+					fixedTotal += col.fixedWidth;
 				}
 				else
 				{
@@ -320,6 +321,7 @@ var et2_dataview_columns = Class.extend({
 				}
 			}
 		}
+		remRelWidth -= fixedTotal / tw;
 		
 		// Check whether the width of columns with relative width is larger than their
 		// maxWidth
@@ -374,31 +376,6 @@ var et2_dataview_columns = Class.extend({
 		// requires other columns to take their maximum width.
 		} while (!done);
 
-
-		// Check whether the columns where a relative width is specified have more
-		// space than the remaining columns - if yes, make the relative ones larger
-		for (var i = 0; i < this.columns.length; i++)
-		{
-			var col = this.columns[i];
-
-			if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE)
-			{
-				if (col.relativeWidth && !col._larger)
-				{
-					if (col.relativeWidth < noWidth)
-					{
-						noWidthCount++;
-						remRelWidth += col.relativeWidth;
-						col._newWidth = true;
-					}
-					else
-					{
-						col._newWidth = false;
-					}
-				}
-			}
-		}
-
 		// Now calculate the absolute width of the columns in pixels
 		this.columnWidths = [];
 		for (var i = 0; i < this.columns.length; i++)
@@ -415,7 +392,7 @@ var et2_dataview_columns = Class.extend({
 				{
 					w = col.fixedWidth;
 				}
-				else if (col.relativeWidth && !col._newWidth)
+				else if (col.relativeWidth)
 				{
 					w = Math.round(tw * col.relativeWidth);
 				}

etemplate/js/et2_extension_nextmatch.js

@@ -154,7 +154,7 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
 
 		// Create the dynheight component which dynamically scales the inner
 		// container.
-		this.dynheight = new et2_dynheight(this.egw().window,
+		this.dynheight = new et2_dynheight(this.getInstanceManager().DOMContainer,
 				this.innerDiv, 150);
 
 		// Create the outer grid container
@@ -707,8 +707,18 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
 					}
 				}
 				if(visibility[colMgr.columns[i].id].visible) colDisplay.push(colName);
-				colSize[colName] = colMgr.getColumnWidth(i);
+				
-			} else if (colMgr.columns[i].fixedWidth) {
+				// When saving sizes, only save columns with explicit values, preserving relative vs fixed
+				// Others will be left to flex if width changes or more columns are added
+				if(colMgr.columns[i].relativeWidth)
+				{
+					colSize[colName] = (colMgr.columns[i].relativeWidth * 100) + "%";
+				}
+				else if (colMgr.columns[i].fixedWidth)
+				{
+					colSize[colName] = colMgr.columns[i].fixedWidth;
+				}
+			} else if (colMgr.columns[i].fixedWidth || colMgr.columns[i].relativeWidth) {
 				this.egw().debug("info", "Could not save column width - no name", colMgr.columns[i].id);
 			}
 		}
@@ -814,7 +824,8 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
 		// Register handler to update preferences when column properties are changed
 		var self = this;
 		this.dataview.onUpdateColumns = function() {
-			self._updateUserPreferences();
+			// Use apply to make sure context is there
+			self._updateUserPreferences.apply(self);
 
 			// Allow column widgets a chance to resize
 			self.iterateOver(function(widget) {widget.resize();}, self, et2_IResizeable);

etemplate/js/et2_extension_nextmatch_dynheight.js

@@ -101,6 +101,17 @@ var et2_dynheight = Class.extend(
 
 			// Calculate the new height of the inner container
 			var w = this.innerNode.width();
+			// Some checking to make sure it doesn't overflow the width when user
+			// resizes the window
+			if(w > this.outerNode.width())
+			{
+				w = this.outerNode.width();
+			}
+			if (w > $j(window).width())
+			{
+				// 50px border, totally arbitrary, but we just need to make sure it's inside
+				w = $j(window).width()-50;
+			}
 			var h = Math.max(this.minHeight, oh + ot - it - bh -
 				this.innerMargin - this.outerMargin);
 			this.innerNode.height(h);