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

vlayout sizing issue with vflex child - IE9-11

    Details

    • Type: Bug
    • Status: Open
    • Priority: Normal
    • Resolution: Unresolved
    • Affects Version/s: 8.0.5
    • Fix Version/s: None
    • Component/s: Components
    • Security Level: Jimmy
    • Labels:
    • Environment:

      reproduced on IE9-11

      Description

      Steps to Reproduce

      run zul file:

      <zk>
      	<div style="width: 400px; border: 1px solid Black;">
      		<vlayout style="background-color: OrangeRed;" height="500px" width="300px" spacing="0">
      			<forEach begin="0" end="10">
      				<div style="background-color: PaleGreen;">above</div>
      			</forEach>
      			<div style="background-color: BurlyWood;" vflex="1">vflex</div>
      			<forEach begin="0" end="10">
      				<div style="background-color: LightBlue;">below</div>
      			</forEach>
      		</vlayout>
      	</div>
      	IE9/10/11 have an empty margin at the bottom, depending on the number of divs around the vflex element
      </zk>
      

      Current Result

      IE 9-11 produce a red area below the vlayout children of unused space (the height of the unused space increases with the number of divs around the vflex div)

      Expected Result

      The middle div using vflex should increase in size to occupy all available area

      Debug Info

      IE computes a non integer height (18.4px) for the divs above and below the vflex div resulting in a rounding error during vflex calculation

      Root Cause

      https://github.com/zkoss/zk/blob/v8.0.5/zul/src/archive/web/js/zul/box/Layout.js#L305
      cp.offsetHeight returns an integer value
      the compensation to add a full pixel for non IE>8 results in a rounding error of 0.6px per div

      using cp.getBoundingClientRect().height will return the precise value

      proposed fix:

      hgh -= (isIssueComp && zk.ie == 8 ? cp.offsetHeight : cp.getBoundingClientRect().height)  + zkxc.marginHeight();
      

        Issue Links

          Activity

          There are no comments yet on this issue.

            People

            • Assignee:
              Unassigned
              Reporter:
              cor3000 cor3000
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: