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

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 7.0.1
    • Fix Version/s: 7.0.2
    • Component/s: ZK Client Engine
    • Security Level: Jimmy
    • Labels:

      Description

      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>
      

        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: