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

jumpy tabbox accordion animation

    XMLWordPrintable

    Details

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

      Description

      Steps to Reproduce

      run the attached example accordion-animation-jumpy.zul

      Current Result

      when switching tabs the tabs below jump during the animation

      Expected Result

      stable positions during animations similar to the workaround accordion-animation-workaround.zul

      Debug Info

      paddings/borders of the .z-tabbox-content element are not animated causing the jumpy positions
      (related to box-size: border box)

      Root Cause

      the slideUp/slideDown functions don't account for padding and borders
      https://www.zkoss.org/javadoc/latest/jsdoc/_global_/jqzk.html#slideDown(zk.Widget,%20_global_.Map)

      Workaround

      move border/paddings into a separate <div> element and adjust CSS styles
      see: accordion-animation-workaround.zul

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              rudyhuang rudyhuang
              Reporter:
              cor3000 cor3000
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 1 hour
                  1d 1h