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

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

    XMLWordPrintable

    Details

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

      Description

      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

      {     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

      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>
      

        Attachments

          Activity

            People

            Assignee:
            Jenkins Jenkins
            Reporter:
            hengsin hengsin
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated: