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

Combobox popup shows at wrong position in IE10

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 7.0.7, 8.0.1
    • 7.0.5
    • None
    • Security Level: Jimmy
    • None
    • ZK 8.0.1

      Steps to reproduce

      1. run index.zul with IE10 (http://zkfiddle.org/sample/10skd2k/16-Combobox-with-big-list#source-1)
        index.zul
        <zk>
          <vbox apply="org.zkoss.bind.BindComposer"  viewModel="@id('vm') @init('foo.ViewModel')">
            <label value="In IE the combobox has a wrong behavior when we opened the list of options if you are inside a window in modal mode and the window dimensions are set in% and if the component is positioned at the end of the window with scroll" />
            <button label="Open Window with dimensions setted in %" onClick="@command('openWindow1')" />
            <button label="Open Window with dimensions setted in px" onClick="@command('openWindow2')" />
          </vbox>
        </zk>
        
        package foo;
        
        import org.zkoss.zk.ui.*;
        import org.zkoss.zk.ui.event.*;
        import org.zkoss.zk.ui.util.*;
        import org.zkoss.zk.ui.ext.*;
        import org.zkoss.zk.au.*;
        import org.zkoss.zk.au.out.*;
        import org.zkoss.zul.*;
        import org.zkoss.bind.annotation.*;
        import java.util.Arrays;
        import java.util.TimeZone;
        
        public class ViewModel {
        	
          private ListModel<String> timeZones;
          
           
          public ListModel<String> getTimeZones(){
            return new ListModelList<String>(Arrays.asList(TimeZone.getAvailableIDs()));  
          }
          
          @Command
          public void openWindow1(){
            Executions.createComponents("window1.zul", null, null);  
          }
          
          @Command
          public void openWindow2(){
            Executions.createComponents("window2.zul", null, null);  
          }
          
        }
        

      window1.zul

      <zk>
       <window border="normal" mode="modal"  height="20%" title="Window with dimensions setted in %" apply="org.zkoss.bind.BindComposer"  viewModel="@id('vm') @init('foo.ViewModel')" contentStyle="overflow-y:scroll;"
        closable="true">
        <vbox>
          <label value="Window with dimensions setted in %"/>
          <space />
          <space />  	
          <space />
          <space />
          <combobox model="@load(vm.timeZones)" />
        </vbox>
       </window>
      
      </zk>
      

      window2.zul

      <zk>
        <window border="normal" mode="modal" height="155px" title="Window with dimensions setted in px" apply="org.zkoss.bind.BindComposer"  viewModel="@id('vm') @init('pkg$.ViewModel')" contentStyle="overflow-y:scroll;"
          closable="true">
         <vbox>
            <label value="Window with dimensions setted in px"/>
            <space />
            <space />  
           <space />
           <space />
            <combobox model="@load(vm.timeZones)" />
        </vbox>
       </window> 
        
      </zk>
      
      1. open combobox

      Actual result

      dropdown list's position is wrong. Its CSS style top is wrong calculated.

      Debug information

      • If you set height with a fixed pixel e.g. height="155px" , the issue doesn't happen.
      • When the combobox is near the Window's bottom border, its offsetHeight is incorrect. try with document.querySelector('.z-combobox-input').getBoundingClientRect()

      Workaround

      Increase the window's height

      <window  height="25%" ...>
      

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

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 7 hours
                1d 7h