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

fragment component flex error when inside v/hlayout

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.5.1
    • 8.5.0
    • Components
    • Security Level: Jimmy
    • None
    • ZK 8.5.1 R1

      Steps to Reproduce

      run either of the snippets below (using hflex or vflex)

      	<hlayout>
      		<div hflex="1" style="border: 1px solid red">hflex div</div>
      		<fragment>Fragment content</fragment>
      	</hlayout>
      
      	<vlayout height="300px">
      		<div vflex="1" style="border: 1px solid red">vflex div</div>
      		<fragment>Fragment content</fragment>
      	</vlayout>
      

      Current Result

      causes JS exceptions

      zul.box.wpd:331 Uncaught TypeError: Cannot read property 'offsetWidth' of null
          at init.beforeChildrenFlex_ (zul.box.wpd:331)
          at Object.fixFlex (zk.wpd:27383)
          at init.onSize (zk.wpd:27366)
          at _invoke (zk.wpd:14963)
          at init.fire (zk.wpd:14946)
          at _fire (zk.wpd:15089)
          at Object.fireDown (zk.wpd:15306)
          at Object.fireDown (zk.wpd:17087)
          at Object.fireSized (zk.wpd:17897)
          at init.replaceHTML (zk.wpd:20581)
      
      zul.box.wpd:306 Uncaught TypeError: Cannot read property 'offsetHeight' of null
          at init.beforeChildrenFlex_ (zul.box.wpd:306)
          at Object.fixFlex (zk.wpd:27383)
          at init.onSize (zk.wpd:27366)
          at _invoke (zk.wpd:14963)
          at init.fire (zk.wpd:14946)
          at _fire (zk.wpd:15089)
          at Object.fireDown (zk.wpd:15306)
          at Object.fireDown (zk.wpd:17087)
          at Object.fireSized (zk.wpd:17897)
          at init.replaceHTML (zk.wpd:20581)
      

      Expected Result

      no exceptions

      Workaround

      nest the <fragment> inside another <div>

      <zk xmlns:x="xhtml">
      	<hlayout>
      		<div hflex="1" style="border: 1px solid red">hflex div</div>
      		<div>
      			<fragment>Fragment content</fragment>
      		</div>
      	</hlayout>
      	<vlayout height="300px">
      		<div vflex="1" style="border: 1px solid red">vflex div</div>
      		<div>
      			<fragment>Fragment content</fragment>
      		</div>
      	</vlayout>
      </zk>
      

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

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 4 hours
                4h
                Remaining:
                Time Spent - 3 hours Remaining Estimate - 1 hour
                1h
                Logged:
                Time Spent - 3 hours Remaining Estimate - 1 hour
                3h