Uploaded image for project: 'Keikai'
  1. Keikai
  2. KEIKAI-573

scrollbar doesn't work when keikai renders itself in an invisible parent DOM

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 5.10.0
    • 5.9.0
    • None
    • Security Level: Jimmy
    • None

      The 1st case: Steps to Reproduce

      1. load the page

          <tabbox height="100%" >
          <custom-attributes org.zkoss.zul.client.rod="true"/>
              <tabs>
                  <tab label="1st"/>
                  <tab label="spreadsheet"/>
              </tabs>
              <tabpanels>
                  <tabpanel hflex="1" vflex="1">
                      first
                      <button label="invalidate spreadsheet" onClick="ss.invalidate()"/>
                  </tabpanel>
                  <tabpanel vflex="1" hflex="1">
                      test
                      <spreadsheet id="ss" hflex="1" vflex="1"
                                   src="/WEB-INF/books/blank.xlsx"
                      />
                  </tabpanel>
              </tabpanels>
          </tabbox>
      

      2. select 2nd tab to make spreadsheet rendered
      3. select the 1st tab
      4. click the button to invalidate spreadsheet

      Current Result

      1. js error
      zss.wpd:35600 Uncaught TypeError: Cannot read properties of undefined (reading 'height')
      at zss.wpd:35600:75
      at doAfterMount (zk.wpd:26214:4)
      at mtBL1 (zk.wpd:26167:3)
      at mtBL0 (zk.wpd:26159:3)
      at mtBL (zk.wpd:26124:3)
      at doEnd (zk.wpd:25590:4)
      at Function._zkf (zk.wpd:25630:4)
      at zss.wpd:43456:13
      at doEnd (zk.wpd:25590:4)
      at Function._zkf (zk.wpd:25629:4)

      2. the scrollbar doesn't work

      Expected Result

      1. no js error
      2. scrollbar should work

      Debug Information

      1. In zss.ScrollPanel.$init(), self._scrollbar.axis.x.scrollbar.el.parentElement.getClientRects() returns an empty collection because self._scrollbar.axis.x.scrollbar.el.parentElement is invisible
      2. If we can find a good way to initialize the scrollbar when keikai becomes visible, that's fine. If not, just leave it as low priority.

      Workaround

      <custom-attributes org.zkoss.zul.client.rod="true"/>

      The 2nd case: Steps to reproduce

      1. load 14754.zul
      check developer tool > Console

      Current Result

      the same error as the 1st case

      Debug info

      this is a special use case that keikai needs to render itself under its parent element is invisible

      Workaround

      • keikai-573-0128.js: get scrollbar parent element's height later after keikai is visible.

        1. 14754.zul
          0.0 kB
        2. keikai-573-0128.js
          4 kB
        3. loadSpreadsheet.js
          0.4 kB
        4. spreadsheet.zul
          0.4 kB

            DevChu DevChu
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: