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

Scroll position is reset after resizing column headers of listbox or grid with native scrollbar [IE9]

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 7.0.1
    • Fix Version/s: 7.0.2
    • Component/s: General
    • Security Level: Jimmy
    • Environment:

      IE9

      Description

      1. scroll down and scroll right
      2. resize any column header
      -> the scroll position is reset to leftmost and topmost.

      Sample code:

      zk.xml
      <zk>
          <library-property>
              <name>org.zkoss.zul.nativebar</name>
              <value>true</value>
          </library-property>
      </zk>
      
      test.zul
      <?meta http-equiv="X-UA-Compatible" content="IE=edge"?>
      
      <div width="100%" height="100%"
          apply="org.zkoss.bind.BindComposer"
          viewModel="@id('vm') @init('pkg$.TestViewModel')">
          <listbox
              model="@init(vm.rows)"
              mold="paging" pageSize="25"
              sizedByContent="true"
              span="true" hflex="1" vflex="1">
              <custom-attributes org.zkoss.zul.listbox.autohidePaging="false" />
      
              <listhead 
                  children="@load(vm.headers)"
                  sizable="true">
                  <template name="children" var="columnHeader">
                      <listheader hflex="min">
                          <label value="@load(columnHeader)"
                                 style="white-space: nowrap;" />
                      </listheader>
                  </template>
              </listhead>
      
              <template name="model" var="row">
                  <listitem children="@load(row.columns)">
                      <template name="children">
                          <listcell label="@load(each)" />
                      </template>
                  </listitem>
              </template>             
          </listbox>
      
          <grid 
              model="@init(vm.rows)"
              mold="paging" pageSize="25"
              sizedByContent="true"
              span="true" hflex="1" vflex="1">
              <columns 
                  children="@load(vm.headers)" 
                  sizable="true">
                  <template name="children" var="columnHeader">
                      <column hflex="min">
                          <label value="@load(columnHeader)" 
                              style="white-space: nowrap;" />
                      </column> 
                  </template>
              </columns>
              <rows>
                  <template name="model" var="row">
                      <row children="@load(row.columns)">
                          <template name="children">
                              <cell><label value="@load(each)"/></cell>
                          </template>
                      </row>
                  </template>
              </rows>
          </grid>
      </div>
      
      TestViewModel.java
      package pkg$;
      
      import java.util.ArrayList;
      import java.util.List;
      
      import org.zkoss.bind.annotation.Init;
      
      public class TestViewModel {
      
          private final List<Row> rows = new ArrayList<Row>();
      
          @Init
          public void init() {
              for (int i = 0; i < 5 * 25; i++) {
                  this.rows.add(new Row());
              }
          }
      
          public List<Row> getRows() {
              return this.rows;
          }
      
          public List<String> getHeaders() {
              final List<String> headers = new ArrayList<String>();
              for (int i = 1; i < 11; i++) {
                  headers.add("Extra long column header label " + i);
              }
              return headers;
          }
      
          public class Row {
      
              private final List<String> columns = new ArrayList<String>();;
      
              public Row() {
                  for (int i = 1; i < 11; i++) {
                      this.columns.add("Column " + i);
                  }
              }
      
              public List<String> getColumns() {
                  return this.columns;
              }
          }
      }
      

      Workaround:

      Apply the following script to the zul page

      workaround
      <script><![CDATA[
      if (zk.ie9_) {
          zk.afterLoad('zul.mesh', function() {
              var _mesh = {};
              zk.override(zul.mesh.MeshWidget.prototype, _mesh, {
                  _onScrollPos: function() {
                      if (this.ebody) {
                          this._left = this.ebody.scrollLeft;
                          this._top = this.ebody.scrollTop;
                      }
                      _mesh._onScrollPos.apply(this, arguments);
                  },
                  onAfterSize: function() {
                      _mesh.onAfterSize.apply(this, arguments);
                      var wgt = this;
                      setTimeout(function() {
                          if (wgt.ebody) {
                              wgt.ebody.scrollLeft = wgt._left || 0;
                              wgt.ebody.scrollTop = wgt._top || 0;
                          }
                          if (wgt.ehead)
                              wgt.ehead.scrollLeft = wgt._left || 0;
                          if (wgt.efoot)
                              wgt.efoot.scrollLeft = wgt._left || 0;
                      }, 300);
                  }
              });
          });
      }]]></script>
      

        Attachments

          Activity

            People

            Assignee:
            jumperchen jumperchen
            Reporter:
            neillee neillee
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved: