0

ZK v5.06 Listbox not displaying correctly in IE6

asked 2011-02-27 17:06:50 +0800

Fujitsu gravatar image Fujitsu
117 2

updated 2011-02-27 17:08:04 +0800

Please see this picture of Chrome and IE 6

In Chrome the right listbox is displayed correctly and the in IE6 the listbox does not.

This was working fine in v5.05 in IE6.

The listbox has a ListitemRenderer.

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2011-02-27 17:10:38 +0800

Fujitsu gravatar image Fujitsu
117 2

Just noticed that if I resize the browser in IE6, the listbox then displays correctly, if I resize the splitter on the screen both listbox fails to display correctly.

link publish delete flag offensive edit

answered 2011-02-27 21:01:51 +0800

SimonPai gravatar image SimonPai
1696 1

Hi,

Can you provide a simple test case that replicate the issue?

Thanks,
Simon

link publish delete flag offensive edit

answered 2011-02-28 19:18:13 +0800

Fujitsu gravatar image Fujitsu
117 2

Hi Simon,

Here is some code:

test.zul

<zk>
  <window id="win" apply="test.TestController" width="100%" height="100%" >
    <borderlayout>
      <north title="Search Criteria:" collapsible="true">
        <grid id="grid" width="300px">
          <rows>
            <row>
              <label>First:</label>
              <textbox id="first" value="@{fixed.firstName}" />
            </row>
            <row>
              <label>Second:</label>
              <textbox id="Second" value="@{fixed.lastName}" />
            </row>
            <row>
              <checkbox id="married" label="Married" disabled="true" checked="@{fixed.married}" />
            </row>
          </rows>
        </grid>
      </north>
      <center title="Results:" >
        <borderlayout>
          <west size="41%" flex="true" splittable="true">
            <listbox id="list" model="@{customers}" mold="paging" pagingPosition="bottom" pageSize="20" sizedByContent="true" vflex="true" width="800px" height="100%" style="overflow:auto;position:relative" span="true">
              <listhead>
                <listheader label="First" />
                <listheader label="Second" />
                <listheader label="Check" />
              </listhead>
              <listitem self="@{each=item}" value="@{item}" >
                <listcell label="@{item.firstName}" />
                <listcell label="@{item.lastName}" />
                <listcell label="@{item.married}" />
              </listitem>
            </listbox>
          </west>
          <center border="none" flex="true">
            <listbox id="list1" model="@{customers}" width="100%" height="100%" style="overflow:auto;position:relative" sizedByContent="false" span="true">
              <listhead>
                <listheader label="First" />
                <listheader label="Second" />
                <listheader label="Check" />
              </listhead>
              <listitem self="@{each=item}" value="@{item}" >
                <listcell label="@{item.firstName}" />
                <listcell label="@{item.lastName}" />
                <listcell label="@{item.married}" />
              </listitem>
            </listbox>        
          </center>
        </borderlayout>
      </center>
      <south height="25px">
        
      </south>
    </borderlayout>
  </window>
</zk>

TestController.java

package test;

import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zkplus.databind.AnnotateDataBinder;
import org.zkoss.zkplus.databind.Binding;
import org.zkoss.zul.Listbox;

public class TestController extends GenericForwardComposer
{
  private List               customers = new ArrayList();
  private Person             fixed;
  private AnnotateDataBinder binder;
  private Listbox            list;

  public TestController( )
  {}

  @Override
  public void doAfterCompose( Component win ) throws Exception
  {
    super.doAfterCompose(win);
    // create binder
    binder = new AnnotateDataBinder(win);

    // create data for listbox
    for (int i = 0; i < 100; i++)
    {
      boolean married = false;
      java.util.Random rn = new java.util.Random();
      int r = rn.nextInt(10);
      if (r > 5)
        married = true;

      customers.add(new Person(randomstring(4, 6), randomstring(4, 6), married));
    }
    // create a person
    fixed = new Person();

    // bind the data
    binder.bindBean("customers", customers);
    binder.bindBean("fixed", fixed);
    binder.loadAll();
  }

  public void onSelect$list( Event event )
  {
    Person selected = (Person)list.getSelectedItem().getValue();

    fixed.setFirstName(selected.getFirstName());
    fixed.setLastName(selected.getLastName());
    fixed.setMarried(selected.isMarried());

    loadBeans("fixed");
  }

  public void loadBeans( String... beans )
  {
    Collection allBindings = binder.getAllBindings();
    List<Component> comps = new ArrayList<Component>();
    for (Object o : allBindings)
    {
      Binding b = (Binding)o;
      for (String bean : beans)
      {
        if (b.getExpression().startsWith(bean + ".") || b.getExpression().equals(bean))
        {
          comps.add(b.getComponent());
          break;
        }
      }
    }
    for (Component c : comps)
    {
      binder.loadComponent(c);
    }
  }

  public static String randomstring( int lo, int hi )
  {
    int n = rand(lo, hi);
    byte b[] = new byte;
    for (int i = 0; i < n; i++)
      b<i > = (byte)rand('a', 'z');
    return new String(b, 0);
  }

  private static int rand( int lo, int hi )
  {
    java.util.Random rn = new java.util.Random();
    int n = hi - lo + 1;
    int i = rn.nextInt(n);
    if (i < 0)
      i = -i;
    return lo + i;
  }
}

Person.java

package test;

public class Person
{
  private String  firstName = "";
  private String  lastName  = "";
  private boolean married   = true;

  public Person( )
  {

  }

  public Person( String firstName, String lastName, boolean married )
  {
    this.firstName = firstName;
    this.lastName = lastName;
    this.married = married;
  }

  public boolean isMarried( )
  {
    return married;
  }

  public void setMarried( boolean married )
  {
    this.married = married;
  }

  public String getFirstName( )
  {
    return firstName;
  }

  public void setFirstName( String firstName )
  {
    this.firstName = firstName;
  }

  public void setLastName( String lastName )
  {
    this.lastName = lastName;
  }

  public String getLastName( )
  {
    return lastName;
  }

  // getter and setters

  public void setFullName( String f )
  {
  // do nothing
  }

  public String getFullName( )
  {
    return firstName + " " + lastName;
  }
}

This code doesnt produce the error exactly how it happens on our system, but its close enough - in IE6 when the screen is displayed resize the splitter and the left listbox will mess up.

link publish delete flag offensive edit

answered 2011-03-07 04:11:34 +0800

SimonPai gravatar image SimonPai
1696 1

It seems to be a bug in 5.0.6. I have posted it here.

Meanwhile, you can try to put a Div between the West region and the listbox:

	<borderlayout>
		<west size="40%" flex="true" splittable="true">
			<div hflex="1">
				<listbox vflex="1" hflex="1">
					<listhead>
						<listheader label="First" />
					</listhead>
					<listitem>
						<listcell label="1" />
					</listitem>
					<listitem>
						<listcell label="2" />
					</listitem>
					<listitem>
						<listcell label="3" />
					</listitem>
				</listbox>
			</div>
		</west>
		<center>
			<div>
				Div Content
			</div>
		</center>
	</borderlayout>

Simon

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-02-27 17:06:50 +0800

Seen: 547 times

Last updated: Mar 07 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More