Implement resize handler callback for widget in order to resize widget properly after the window size changes

etemplate/js/et2_core_DOMWidget.js

@@ -75,6 +75,12 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
 			type: "js",
 			default: et2_no_init,
 			description: "Set default onExecute javascript method for action not specifying their own"
+		}, 
+		resize_ratio: {
+			name: "Resize height of the widget on callback resize",
+			type:"string",
+			default: '',
+			description: "Allow Resize height of the widget based on exess height and given ratio"
 		}
 	},
 
@@ -506,7 +512,7 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
 		// 'allowed' for this widget at this time
 		var action_links = this._get_action_links(actions);
 		widget_object.updateActionLinks(action_links);
-	}
+		}
 });
 
 /**

etemplate/js/et2_widget_grid.js

@@ -26,7 +26,7 @@
  *
  * @augments et2_DOMWidget
  */
-var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned],
+var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned, et2_IResizeable],
 {
 	createNamespace: true,
 
@@ -981,6 +981,17 @@ var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned],
 			}
 		}
 		return ids.join('_');
+	},
+	
+	resize: function (_height)
+	{
+		if (typeof this.options.resize_ratio != 'undefined'
+			&&this.options.resize_ratio !='' && _height)
+		{
+			// apply the ratio
+			_height *= this.options.resize_ratio;
+			//this.table.height(this.table.height() + _height);
+		}
 	}
 });
 et2_register_widget(et2_grid, ["grid"]);

etemplate/js/et2_widget_tabs.js

@@ -23,7 +23,7 @@
  *
  * @augments et2_valueWidget
  */
-var et2_tabbox = et2_valueWidget.extend([et2_IInput],
+var et2_tabbox = et2_valueWidget.extend([et2_IInput,et2_IResizeable],
 {
 	attributes: {
 		'tabs': {
@@ -445,6 +445,14 @@ var et2_tabbox = et2_valueWidget.extend([et2_IInput],
 	},
 	isValid: function(messages) {
 		return true;
+	},
+	
+	resize: function (_height)
+	{
+		if(_height)
+		{
+			this.tabContainer.height(this.tabContainer.height() + _height);
+		}
 	}
 });
 et2_register_widget(et2_tabbox, ["tabbox"]);

etemplate/js/et2_widget_textbox.js

@@ -23,7 +23,7 @@
  *
  * @augments et2_inputWidget
  */
-var et2_textbox = et2_inputWidget.extend(
+var et2_textbox = et2_inputWidget.extend([et2_IResizeable],
 {
 	attributes: {
 		"multiline": {
@@ -225,6 +225,18 @@ var et2_textbox = et2_inputWidget.extend(
 			this.input.removeAttr("placeholder");
 		}
 		this.options.blur = _value;
+	},
+	
+	resize: function (_height)
+	{
+		if (typeof this.options.resize_ratio != 'undefined'
+			&&this.options.resize_ratio !='' && _height)
+		{
+			// apply the ratio
+			_height *= this.options.resize_ratio;
+			
+			this.input.height(this.input.height() + _height);
+		}
 	}
 });
 et2_register_widget(et2_textbox, ["textbox", "passwd"]);

etemplate/js/etemplate2.js

@@ -110,10 +110,13 @@ etemplate2.prototype.resize = function()
 {
 	if (this.widgetContainer)
 	{
+		//Calculate the excess height
+		var excess_height = egw(window).is_popup()? $j(window).height() - $j('.et2_container').height() - 20: false;
 		// Call the "resize" event of all functions which implement the
 		// "IResizeable" interface
 		this.widgetContainer.iterateOver(function(_widget) {
-			_widget.resize();
+			
+			_widget.resize(excess_height);
 		}, this, et2_IResizeable);
 	}
 };