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

Listheaders are mis-aligned with listcells under non-nativebar

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.0.1, 7.0.8
    • 8.0.0, 7.0.7
    • None
    • Security Level: Jimmy
    • None
    • ZK 8.0.1 S3

      steps to reproduce

      1. load the attached zul
      2. drag the scrollbar to right-most postion

      result

      Listheaders are mis-aligned with listcells

      Debug info

      • there is no such issue with <custom-attributes org.zkoss.zul.nativebar="true"/>
      • 7.0.2 doesn't have such issue, and it happens since 7.0.3

      workaround

      <script type="text/javascript"><![CDATA[
      zk.afterLoad('zul', function () {
      	var oldMethod = {};
      	zk.override(zul.Scrollbar.prototype, oldMethod, {		
      		syncSize: function (showScrollbar) {
      			this._checkBarRequired();
      			
      			var wgt = this.widget,
      				frozen = wgt.frozen, froenScrollWidth = 0,
      				tpad = wgt.$n('tpad'), bpad = wgt.$n('bpad'),
      				cave = this.cave, scroller = this.scroller,
      				hbar = this.$n('hor'), vbar = this.$n('ver'),
      				needH = this.needH, needV = this.needV,
      				opts = this.opts,
      				scrollHeight = scroller.scrollHeight;
      			
      			if (tpad && bpad) //for Mesh Widget ROD
      				scrollHeight += tpad.offsetHeight + bpad.offsetHeight;
      			if (frozen) //for Frozen component
      				froenScrollWidth = 50 * (frozen._scrollScale || 0);
      			
      			if (needH) {
      				var old = hbar.style.display;
      				hbar.style.display = 'block'; // for calculate size
      				var embed = this.$n('hor-embed'),
      					left = this.$n('hor-left'),
      					right = this.$n('hor-right'),
      					wrapper = this.$n('hor-wrapper'),
      					ws = wrapper.style,
      					startX = opts.startPositionX,
      					wdh = cave.offsetWidth - startX,
      					swdh = scroller.scrollWidth - startX + froenScrollWidth,
      					lwdh = left.offsetWidth,
      					rwdh = right.offsetWidth,
      					hwdh = wdh - lwdh - rwdh;
      				
      				if (swdh < wdh) //only happened with Frozen
      					swdh = wdh + froenScrollWidth;
      				
      				if (startX) {
      					left.style.left = jq.px(startX);
      					ws.left = jq.px(startX + lwdh);
      					if (embed)
      						embed.style.left = jq.px(startX);
      				}
      				
      				if (needV) {
      					ws.width = jq.px(hwdh - rwdh);
      					right.style.right = jq.px(rwdh);
      				} else {
      					ws.width = jq.px(hwdh);
      				}
      				
      				var indicator = this.$n('hor-indicator'),
      					wwdh = wrapper.offsetWidth,
      					iwdh = Math.round(wwdh * wdh / swdh),
      					iwdh = iwdh > 15 ? iwdh : 15;
      				
      				indicator.style.width = iwdh + 'px';
      				if (embed)
      					embed.style.width = (iwdh + lwdh + rwdh) + 'px';
      				//sync scroller position limit
      				this.hLimit = swdh - wdh;
      				//sync scroll-bar indicator position limit
      				var limit = wwdh - iwdh;
      				if (limit <= 0) {
      					this.hBarLimit = 0;
      					indicator.style.display = 'none';
      				} else {
      					this.hBarLimit = limit;
      				}
      				//sync indicator/scroller width ratio
      				this.hRatio = Math.abs(this.hLimit / this.hBarLimit);
      				hbar.style.display = old; // for calculate size
      			}
      			if (needV) {
      				var old = vbar.style.display;
      				vbar.style.display = 'block'; // for calculate size
      				var embed = this.$n('ver-embed'),
      					up = this.$n('ver-up'),
      					down = this.$n('ver-down'),
      					wrapper = this.$n('ver-wrapper'),
      					ws = wrapper.style,
      					startY = opts.startPositionY,
      					hgh = cave.offsetHeight - startY,
      					shgh = vbar.offsetWidth + scrollHeight - startY,
      					uhgh = up.offsetHeight
      					dhgh = down.offsetHeight,
      					vhgh = hgh - uhgh - dhgh;
      				
      				if (startY) {
      					vbar.style.top = jq.px(cave.offsetTop + startY);
      					down.style.bottom = jq.px(startY);
      					if (embed)
      						embed.style.top = vbar.style.top;
      				}
      				if (needH) {
      					ws.height = jq.px0(vhgh - dhgh);
      					down.style.bottom = jq.px(startY + dhgh);
      				} else {
      					ws.height = jq.px(vhgh);
      				}
      				
      				var indicator = this.$n('ver-indicator'),
      					whgh = wrapper.offsetHeight,
      					ihgh = Math.round(whgh * hgh / shgh),
      					ihgh = ihgh > 15 ? ihgh : 15;
      				
      				indicator.style.height = ihgh + 'px';
      				if (embed)
      					embed.style.height = (ihgh + uhgh + dhgh) + 'px';
      				//sync scroller position limit
      				this.vLimit = shgh - hgh;
      				//sync scroll-bar indicator position limit
      				var limit = whgh - ihgh;
      				if (limit <= 0) {
      					this.vBarLimit = 0;
      					indicator.style.display = 'none';
      				} else {
      					this.vBarLimit = limit;
      				}
      				//sync indicator/scroller width ratio
      				this.vRatio = Math.abs(this.vLimit / this.vBarLimit);
      				vbar.style.display = old; // for calculate size
      			}
      			
      			this.scrollTo(this._pos[0], this._pos[1]); //keep scroll position
      			if (showScrollbar) {
      				_showScrollbar(this, 'hor', 1);
      				_showScrollbar(this, 'ver', 1);
      			}
      		},			
      	});
      });	
      ]]>
      </script>	
      

            wenninghsu wenninghsu
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 5 hours, 10 minutes
                5h 10m