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

jumpy tabbox accordion animation

XMLWordPrintable

    • None

      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

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

              Created:
              Updated:
              Resolved:

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