steps to reproduce
- load the attached zul
- 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>
- relates to
-
ZK-2305 Horizontal scrollbar of Listbox covers the last item from being clicked
- Closed