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

hflex and vflex doesn't consider a component's margin

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 9.6.4
    • 9.6.2
    • None
    • Security Level: Jimmy
    • None

      Steps to Reproduce

      inspect a groupbox' position

      Current Result

      margin-right and margin-bottom overflow the parent element's boundary

      Expected Result

      the margin doesn't overflow the parent's boundary

      Debug Information

      • ZK renders "height:100%; width: 100%" on a groupbox
      • consider another similar case
            <style>
                .z-groupbox {
                    margin: 10px;
                    display: inline;
                }
                .z-groupbox-content {
                    background: white;
                }
            </style>
            <div vflex="1">
                <groupbox hflex="1" vflex="1"></groupbox>
                <groupbox hflex="1" vflex="1"></groupbox>
            </div>
        

        ZK renders height: calc(100% - 20px); on a groupbox which means it considers the margin.

      Workaround

        1. 15330-fix2.zul
          0.7 kB
        2. 15330-fix3.zul
          0.6 kB
        3. expected.jpg
          expected.jpg
          29 kB
        4. margin-overflow.jpg
          margin-overflow.jpg
          19 kB
        5. zk-5224.zul
          0.3 kB

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

              Created:
              Updated:
              Resolved: