Use et2_nextmatch.no_dynheight to solve bottom buttons not always visible

addressbook/templates/default/select.xet

@@ -89,7 +89,7 @@
 		</grid>
 	</template>
 	<template id="addressbook.select" template="" lang="" group="0" version="1.9.002">
-		<nextmatch id="nm" template="addressbook.select.rows" span="all"/>
+		<nextmatch id="nm" template="addressbook.select.rows" span="all" no_dynheight="true"/>
 		<et2-hbox class="footer">
 			<et2-select label="Add" id="what_to_use">
 				<option value="">Business or home email</option>
@@ -102,6 +102,7 @@
 			<et2-button label="Close" id="close" onclick="alert('ToDo ;)'); return false;"></et2-button>
 		</et2-hbox>
 		<styles>
+            #addressbook-select > et2-template::part(base) { display: flex; flex-direction: column;}
 			div.dialog_content img.dialog_icon[src=""] { display: none; }
 			et2-dialog#dialog-addressbook-select et2-button { max-width: 125px !important; }
 			et2-dialog#dialog-addressbook-select::part(panel) { width: 90vh; height: 75vh; position: absolute; bottom: 1vh; }

api/js/etemplate/et2_extension_nextmatch.ts

@@ -250,6 +250,12 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 			"type": "any",
 			"description": "The nextmatch settings",
 			"default": {}
+		},
+		"no_dynheight": {
+			"name": "No dynheight",
+			"type": "boolean",
+			"description": "Disable the dynamic height",
+			"default": false
 		}
 	};
 
@@ -367,7 +373,14 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 
 		// Create the dynheight component which dynamically scales the inner
 		// container.
-		this.dynheight = this._getDynheight();
+		if(!this.options.no_dynheight)
+		{
+			this.dynheight = this._getDynheight();
+		}
+		else
+		{
+			this.div.addClass("no_dynheight");
+		}
 
 		// Create the outer grid container
 		this.dataview = new et2_dataview(this.innerDiv, this.egw());
@@ -463,7 +476,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 	{
 		super.doLoadingFinished();
 
-		if(!this.dynheight)
+		if(!this.dynheight && !this.options.no_dynheight)
 		{
 			this.dynheight = this._getDynheight();
 		}
@@ -545,6 +558,14 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 				this.dataview.resize(_w, _h);
 			}, this);
 		}
+		else
+		{
+			// Browser calculated size
+			const styles = getComputedStyle(this.dataview.table.get(0).parentElement);
+			this.dataview.resize(parseInt(styles.width) - this.dataview.scrollbarWidth, parseInt(styles.height));
+			// This needs to stay at 100% so browser does the work
+			this.dataview.grid.scrollarea.height("100%");
+		}
 	}
 
 	/**
@@ -2551,10 +2572,11 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 		this.template_promise = template.updateComplete.then(() =>
 			{
 				parse.call(this, template);
-				if(!this.dynheight)
+				if(!this.dynheight && !this.options.no_dynheight)
 				{
 					this.dynheight = this._getDynheight();
 				}
+				if(this.dynheight)
 				this.dynheight.initialized = false;
 
 				// Give components a chance to finish.  Their size will affect available space, especially column headers.
@@ -2984,10 +3006,10 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 		this.div.addClass('print');
 
 		// Trigger resize, so we can fit on a page
-		this.dynheight.outerNode.css('max-width', this.div.css('max-width'));
+		this.dynheight?.outerNode.css('max-width', this.div.css('max-width'));
 		this.resize();
 		// Reset height to auto (after width resize) so there's no restrictions
-		this.dynheight.innerNode.css('height', 'auto');
+		this.dynheight?.innerNode.css('height', 'auto');
 
 		// Check for rows that aren't loaded yet, or lots of rows
 		const range = this.controller._grid.getIndexRange();
@@ -3064,7 +3086,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 				this.print.orientation_style = style;
 
 				// Trigger resize, so we can fit on a page
-				this.dynheight.outerNode.css('max-width', this.div.css('max-width'));
+				this.dynheight?.outerNode.css('max-width', this.div.css('max-width'));
 
 				// Handle columns
 				let column_names = [];
@@ -3298,7 +3320,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 			// @ts-ignore
 			this.set_columns(pref, app);
 		}
-		this.dynheight.outerNode.css('max-width', 'inherit');
+		this.dynheight?.outerNode.css('max-width', 'inherit');
 		this.resize();
 	}
 }

api/templates/default/etemplate2.css

@@ -843,6 +843,30 @@ which caused click on free space infront of a tag stops nm row selection*/
     display: table-row;
 }
 
+/* No autosize on et2_nextmatch */
+.et2_nextmatch.no_dynheight {
+	display: flex;
+	flex-direction: column;
+	flex: 2 1 auto;
+	min-height: 10em;
+	overflow: hidden;
+}
+
+.et2_nextmatch.no_dynheight > div:not(.nextmatch_header) {
+	flex: 1 1 100%;
+}
+
+.et2_nextmatch.no_dynheight .egwGridView_outer {
+	width: 100%;
+	height: 100%;
+}
+
+.et2_nextmatch.no_dynheight .egwGridView_scrollarea {
+	height: 100%;
+	overflow: hidden;
+	overflow-y: auto;
+}
+
 /*
 Nextmatch print dialog
 */