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

tabpanel resize flicker (and disappear)

XMLWordPrintable

    • ZK 9.5.1 S1

      Steps to Reproduce

      resize the browser window (horizontally)

      <zk>
          <tabbox orient="vertical" height="500px">
              <tabs width="150px">
                  <tab label="tab-1"/>
              </tabs>
              <tabpanels>
                  <tabpanel style="background-color: yellow;">
                  </tabpanel>
              </tabpanels>
          </tabbox>
      </zk>
      

      Current Result

      when reducing the size the tabpanel is flickering heavily
      rarely (depends on when the mouse is released) the tabpanel remains hidden

      Expected Result

      no flickering
      tabpanel not disappearing completely

      Debug Information

      the tabpanel is not really removed, it simply line-breaks below the <tabs> area - appearing invisible

      Workaround

      define calculated max width on the <tabpanels> component
      max-width: calc(500px - 150px)

          <tabbox orient="vertical" height="500px">
              <tabs width="150px">
                  <tab label="tab-1"/>
              </tabs>
              <tabpanels style="max-width: calc(100% - 150px);">
                  <tabpanel style="background-color: yellow;">
                  </tabpanel>
              </tabpanels>
          </tabbox>
      

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

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Time Spent - 3 hours Remaining Estimate - 5 hours
                5h
                Logged:
                Time Spent - 3 hours Remaining Estimate - 5 hours
                3h