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

Hflex min column width triggers text-overflow in Chrome by 1px

    XMLWordPrintable

    Details

      Description

      Steps to Reproduce

      Run fiddle
      http://zkfiddle.org/sample/35jpl3u/2-Chrome-text-ellipsis
      1st column is normal
      2nd column have text-overflow: ellipsis to cut the text with "..." if the column is resized smaller than the text width

      Current Result

      in chrome:
      when loading, the 2nd column is already too small by 1px, showing ...
      when resizing, works as intended
      in FF
      columns renders with enough space to show the text
      when resizing, works as intended

      Expected Result

      the hflex=min sizing should provide enough space not to trigger the text-overflow in chrome too

      Debug Info

      actual cause not found. could be a difference in handling from browsers CSS engine.

      Root Cause

      not identified

      Workaround

              <script><![CDATA[ 
      		zk.afterLoad('zul.grid', function() {
      			var xGrid = {};
      			zk.override(zul.grid.Grid.prototype, xGrid ,{
      				_calcMinWds : function() {
      					if (!this._minWd)
      						var fixEllipsis = true;
      					var result = xGrid._calcMinWds.apply(this, arguments);
      					if(fixEllipsis){
      						fixEllipsis = false;
      						var i;
      						var self = this;
      						for (i = 0; i < result.wds.length; i++) { 
      							if(self.columns.getChildAt(1).getStyle().includes("ellipsis")){
      								result.wds[i]++;
      							}
      						}
      					}
      					return result;
      				}
      			});//zk.override
      		});//zk.afterLoad
      	]]></script>
      

        Attachments

          Activity

            People

            Assignee:
            Unassigned
            Reporter:
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved: