Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4708

Provide a class on columns hidden by CE frozen for easy CSS customization



    • Type: New Feature
    • Status: Open
    • Priority: Normal
    • Resolution: Unresolved
    • Affects Version/s:
    • Fix Version/s: None
    • Component/s: Components
    • Security Level: Jimmy
    • Labels:


      Steps to Reproduce

      Download Fiddle, run locally in a ZK CE environment


      1. Enable text wrapping for grid column header:

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

      {     white-space: pre-line;     text-overflow: ellipsis; }

      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


      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:

      			.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;


      		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) {
      					return result;




            Jenkins Jenkins
            hengsin hengsin
            0 Vote for this issue
            2 Start watching this issue