Implemented own code for column resizing as jQuery-UI did not work properly with FF

etemplate/js/et2_dataview_view_gridContainer.js

@@ -18,6 +18,7 @@
 	et2_core_stylesheet;
 
 	et2_dataview_view_grid;
+	et2_dataview_view_resizeable;
 */
 
 /**
@@ -368,25 +369,14 @@ var et2_dataview_gridContainer = Class.extend({
 				.append(cont)
 				.appendTo(this.headTr);
 
-			// Every column but last can be resized
+			// Every column but last can be resized // TODO: This won't work as the last column could be hidden
 			if(i < this.columns.length-1) {
 				var enc_column = self.columnMgr.getColumnById(col.id);
-				 column.resizable({
-					handles:"e",
-					helper: "nextmatch_resize_helper",
-					stop: (function(columnIdx, enc_column) { return function(event, ui) {
-						var original = self.columnMgr.columnWidths[columnIdx];
-						var newWidth = original + (ui.size.width - ui.originalSize.width);
-
-						// Using full height helper stretches the header - reset it
-						// TODO: Get rid of magic -5
-						if(jQuery(this).height() > ui.originalSize.height) jQuery(this).height(ui.originalSize.height-5);
-						enc_column.set_width(newWidth+ "px");
+				et2_dataview_makeResizeable(column, function(_w) {
+						this.set_width(_w + "px");
 						self.columnMgr.updated = true;
 						self.updateColumns();
-
-					};})(i, enc_column)
-				});
+				}, enc_column);
 			}
 
 			// Store both nodes in the columnNodes array

etemplate/js/et2_dataview_view_resizeable.js

@@ -0,0 +1,133 @@
+/**
+ * eGroupWare eTemplate2 - Functions which allow resizing of table headers
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage dataview
+ * @link http://www.egroupware.org
+ * @author Andreas Stöckel
+ * @copyright Stylite 2011
+ * @version $Id$
+ */
+
+"use strict";
+
+/**
+ * This set of functions is currently only supporting resizing in ew-direction
+ */
+
+(function() {
+
+	// Define some constants
+	var RESIZE_BORDER = 7;
+	var RESIZE_MIN_WIDTH = 25;
+	var RESIZE_ADD = 2; // Used to ensure mouse is under the resize element after resizing has finished
+
+	// In resize region returns whether the mouse is currently in the
+	// "resizeRegion"
+	function inResizeRegion(_x, _elem)
+	{
+		var ol = _x - _elem.offset().left;
+		return (ol > (_elem.outerWidth(true) - RESIZE_BORDER));
+	}
+
+	var helper = null;
+	var overlay = null;
+	var didResize = false;
+	var resizeWidth = 0;
+
+	function startResize(_outerElem, _elem, _callback)
+	{
+		if (overlay == null || helper == null)
+		{
+			// Prevent text selection
+			_elem[0].onselectstart = function() {
+				return false;
+			}
+
+			// Reset the "didResize" flag
+			didResize = false;
+
+			// Create the resize helper
+			var left = _elem.offset().left;
+			helper = $j(document.createElement("div"))
+				.addClass("egwResizeHelper")
+				.appendTo("body")
+				.css("top", _elem.offset().top + "px")
+				.css("left", left + "px")
+				.css("height", _outerElem.outerHeight(true) + "px");
+
+			// Create the overlay which will be catching the mouse movements
+			overlay = $j(document.createElement("div"))
+				.addClass("egwResizeOverlay")
+
+				.bind("mousemove", function(e) {
+					didResize = true;
+					resizeWidth = Math.max(e.clientX - left + RESIZE_ADD,
+						RESIZE_MIN_WIDTH);
+					helper.css("width", resizeWidth + "px");
+				})
+
+				.bind("mouseup", function() {
+					stopResize();
+
+					// Reset text selection
+					_elem[0].onselectstart = null;
+
+					// Call the callback if the user actually performed a resize
+					if (didResize)
+					{
+						_callback(resizeWidth);
+					}
+				})
+				.appendTo("body");
+		}
+	}
+
+	function stopResize()
+	{
+		if (helper != null)
+		{
+			helper.remove();
+			helper = null;
+		}
+
+		if (overlay != null)
+		{
+			overlay.remove();
+			overlay = null;
+		}
+	}
+
+	this.et2_dataview_makeResizeable = function(_elem, _callback, _context)
+	{
+		// Get the table surrounding the given element - this element is used to
+		// align the helper properly
+		var outerTable = _elem.closest("table");
+
+		// Bind the "mousemove" event in the "resize" namespace
+		_elem.bind("mousemove.resize", function(e) {
+			_elem.css("cursor", inResizeRegion(e.clientX, _elem) ? "ew-resize" : "auto");
+		});
+
+		// Bind the "mousedown" event in the "resize" namespace
+		_elem.bind("mousedown.resize", function(e) {
+			if (inResizeRegion(e.clientX, _elem))
+			{
+				// Start the resizing
+				startResize(outerTable, _elem, function(_w) {
+					_callback.call(_context, _w);
+				});
+			}
+
+			return false;
+		});
+	}
+
+	this.et2_dataview_resetResizeable = function(_elem)
+	{
+		// Remove all events in the ".resize" namespace from the element
+		_elem.unbind(".resize");
+	}
+}).call(window);
+

etemplate/js/test/test.css

@@ -101,7 +101,6 @@ div.et2_hbox_right {
 
 .et2_label {
 	color: #101050;
-	font-size: 10pt;
 }
 
 a.et2_url {
@@ -566,3 +565,23 @@ div.et2_progress > div {
 	background-color: #D00000;
 	height: 5px;
 }
+
+.egwResizeOverlay {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	z-index: 99999;
+	cursor: ew-resize;
+}
+
+.egwResizeHelper {
+	position: absolute;
+	display: block;
+	z-index: 99998;
+	opacity: 0.5;
+	background-color: #829cbc;
+	cursor: ew-resize;
+}
+