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

Clients.scrollIntoView() not working on a listitem within a listbox without scrollbar, but the enclosing page has a scrollbar

XMLWordPrintable

      Steps to reproduce:

      1. resize browser window until vertical scrollbar appears.
      2. click the button to try to scroll the listitem into view

      Nothing happens.

      sample.zul
      <zk>
          <button label="Scroll into view">
          <attribute name="onClick"><![CDATA[
          Clients.scrollIntoView(item);
          ]]></attribute>
          </button>
          <div height="300px"/>
          <listbox>
              <listitem label="1"/>
              <listitem label="2"/>
              <listitem label="3"/>
              <listitem label="4"/>
              <listitem label="5"/>
              <listitem label="6"/>
              <listitem label="7"/>
              <listitem id="item" label="8"/>
              <listitem label="9"/>
              <listitem label="10"/>          
          </listbox>
      </zk>
      

      Workaround is to use zk(listitem).scrollIntoView() instead.

      workaround.zul
      <zk xmlns:w="client">
          <button label="Server scroll">
          <attribute name="onClick"><![CDATA[
          Clients.evalJavaScript("var item = zk.Widget.$('$item'); zk(item).scrollIntoView();");
          ]]></attribute>
          </button>
          <button label="Client scroll">
          <attribute w:name="onClick"><![CDATA[
          var item = this.$f('item');     
          zk(item).scrollIntoView();
          ]]></attribute>
          </button>
          <div height="300px"/>
          <listbox>
              <listitem label="1"/>
              <listitem label="2"/>
              <listitem label="3"/>
              <listitem label="4"/>
              <listitem label="5"/>
              <listitem label="6"/>
              <listitem label="7"/>
              <listitem id="item" label="8"/>
              <listitem label="9"/>
              <listitem label="10"/>          
          </listbox>
      </zk>
      

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

              Created:
              Updated:
              Resolved: