Steps to Reproduce

Download Fiddle, run locally in a ZK CE 9.5.0.1 environment

https://zkfiddle.org/sample/3tgosqk/1-Frozen-column-class

1. Enable text wrapping for grid column header:

.z-grid-header > table > tbody > tr.z-columns > th.z-column

2. Set up grid with many columns that will have horizontal scroll. Column header label should have more than 1 word (i.e with white space).

Current Result

CE frozen hides columns to the left by setting a width: 0.001px style. (browser hidden elements compatibility).

Due to the white-space: pre-line CSS set on the header content, this cause the header to line-break on every blank space in the header title. If this happen, the column height grows by as many lines as there are white spaces in the header, causing layout change on the whole mesh.

The column header height will auto increase when you drag the horizontal scrollbar to the right. This is due to the hidden column header's width is being set to 0.001px (inspection from Chrome Dev Tool - <th id="mA2Q4a2" style="width: 0.001px;" class="z-column z-column-sort" role="columnheader"><div id="mA2Q4a2-cave" class="z-column-content"><div class="z-column-sorticon"><i id="mA2Q4a2-sort-icon" aria-hidden="true"></i></div>DB Table Name</div></th>) and this trigger the text wrapping that will increase the height of the column.

Expected Result

In order to allow the developer to control the columns behavior, add a class to identify column widgets which have been marked as "hidden" by the frozen component.

This will allow the developer to add CSS in order to reset the linebreak behavior and avoid the extra height, or other side effect from similar column CSS customization

The column header height doesn't auto increase when scroll to right.

Debug Information

Only happen in CE,

EE frozen doesn't hide columns

Workaround

This snippet will add "hiddencol" class to the z-column DOM node if the node is hidden by the frozen component.

This allow the developer to remove the line breaks in that situation:

<style>
			.z-grid-header > table > tbody > tr.z-columns > th.z-column{
			     white-space: pre-line;     text-overflow: ellipsis;
		     }
			.z-grid-header > table > tbody > tr.z-columns > th.z-column.hiddencol{
			     white-space: nowrap;     text-overflow: unset;
		     }
		</style>

<script><![CDATA[
		zk.afterLoad("zul.mesh", function () {
		    var _xFrozen = {};
		    zk.override(zul.mesh.Frozen.prototype, _xFrozen, {
		        _doScrollNow: function() {
					var result = _xFrozen._doScrollNow.apply(this, arguments);
					/*Patch: add class to non-visible columns*/
					var mesh = this.parent;
					if (mesh.head) {
							var totalCols = mesh.head.nChildren,
									hdcol = mesh.ehdfaker.firstChild;
			
						for (var faker, i = 0; hdcol && i < totalCols; hdcol = hdcol.nextSibling, i++) {
							if (hdcol.style.width.indexOf('0.001px') != -1) {
								jq(zk.$(hdcol).$n()).addClass("hiddencol");
							}else{
								jq(zk.$(hdcol).$n()).removeClass("hiddencol");
							}
						}
					}
					return result;
		        }
		     });
		});
	]]></script>