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

vflex inside drawer has no effect

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 9.0.1
    • 9.0.0
    • Components
    • Security Level: Jimmy

      Steps to Reproduce

      <zk>
        <div>
          <drawer id="dr" closable="true" position="left" title="test">
            <div style="border: 1px solid red;" vflex="1">
              surrounding div uses vflex="1"
            </div>
          </drawer>
          <button onClick="dr.open()" label="open drawer"/>
        </div>
      </zk>
      

      http://zkfiddle.org/sample/110qelg/1-vflex-inside-drawer

      Current Result

      the <div> inside the drawer doesn't resize

      Expected Result

      the <div> should consume the whole available height inside the drawer

      Debug Information

      1. The height .z-drawer-cave is not set.
      2. CSS fiex is not applied if the initial state is invisible (similar to ZK-4467)

      Workaround

      Apply this patch

      <style>
      .z-drawer-cave { height: 100%; }
      </style>
      <script>
      var _xDrawer = {};
      zk.afterLoad('zkmax.wgt', function () {
          zk.override(zkmax.wgt.Drawer.prototype, _xDrawer, {
              setVisible: function (visible) {
                  _xDrawer.setVisible.apply(this, arguments);
                  if (visible) zUtl.fireShown(this);
              }
          });
      });
      </script>
      

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

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 4 hours
                4h
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 hours
                4h