My favorites | Sign in
Google
                
New issue | Search
for
| Advanced search | Search tips
Issue 3336: IE ignores setVisible(false) if invoked on Image widgets that appear on an animated TabPanel
1 person starred this issue and may be notified of changes. Back to list
Status:  Accepted
Owner:  jlabanca+personal@google.com
Category-UI
Type-Defect


Sign in to add a comment
 
Reported by johncurt...@gmail.com, Feb 04, 2009
Found in GWT Release: 1.5.3

Detailed description/workaround: See comments in code below:

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.Widget;
/*
  Reproduces an incorrect IE behavior first discovered in an
   earlier version of a Client-side GChart tutorial
   available at <a
   href="http://whatwouldnickdo.com/wordpress/264/simple-charts-in-gwt-
with-gchart/">/home/nick</a>.

   Code below is a revision of that earlier code, used with
   Nick's permission.
   
   To reproduce the problem:

      Add an instance of this class to the RootPanel.

      Click the Calculate button, click on "ButtonTab",
      click the Calculate button again.

   Expected behavior is to see at first a full line, then a
   half line, drawn diagonally across the "GraphicTab" tab.
      
   Works fine in FF2, FF3 and Chrome.

   But, in IE6, IE7 you see a full line both times.  In
   effect, the 50 setVisible(false) invocations are
   improperly ignored by IE.
   
   Comments show 3 workarounds that make IE behave as the
   others do.

   Note that workaround #2 would in general change the page
   layout since it switches from "display: none" (I think
   used by setVisible(false)) to "visibility: hidden", so it
   might not be appropriate unless your Widgets are placed,
   as in this example, on an AbsolutePanel.

   Finally, in earlier tests, I recollect the problem did
   not occur if I swapped in an HTML widget for the Image
   Widgets used below. The problem also does not occur
   in analogous Client-side GChart (http://gchart.googlecode.com) 
   code that uses Grid instead if Image. Finally, I recollect that 
   stripping off the top level SimplePanel also made the 
   problem go away at one point during testing.
*/
public class TestGChart41a extends SimplePanel {
   TabPanel tp = new TabPanel();
   AbsolutePanel ap = new AbsolutePanel();
   int counter = 0;
   TestGChart41a() {
     add(tp);
// Workaround #1: disable animation
     tp.setAnimationEnabled(true);
	  Button calcButton = new Button("Calculate");	
     calcButton.addClickListener(new ClickListener() {
        public void onClick(Widget sender) {
           if (counter == 0) { // create, show, full line
              for (int i=0; i < 100; i++) {
                 Image img = new Image("clear.cache.gif");
                 DOM.setStyleAttribute(img.getElement(),
                                       "backgroundColor",
                                       "red");
                 img.setPixelSize(3, 3);
                 ap.add(img, 3*i, 3*i);
              }
           }
           else if (counter % 2 == 1) { // next, the half line
              for (int i=50; i < 100; i++) {
                 ap.getWidget(i).setVisible(false);
// Workaround #2: swap setVisible line above with next line:
//               DOM.setStyleAttribute(ap.getWidget(i).getElement(),
//                                     "visibility",
//                                     "hidden");
              }
           }
           else if (counter % 2 == 0) { // back to full line again
              for (int i=50; i < 100; i++) {
                 ap.getWidget(i).setVisible(true);
// Workaround #2: swap setVisible line above with next line:
//               DOM.setStyleAttribute(ap.getWidget(i).getElement(),
//                                     "visibility",
//                                     "");
              }
           }
// Workaround #3: move next line to top of this onClick() method
           tp.selectTab(1);
           counter++;
			}
		});
     
     tp.add(calcButton, "ButtonTab_____");  
     tp.add(ap, "_____GraphicTab");
     ap.setPixelSize(300, 300);
     tp.selectTab(0);
     tp.setPixelSize(300,300);
   }
}


Comment 1 by sumitcha...@google.com, Feb 04, 2009
(No comment was entered for this change.)
Owner: rj...@google.com
Labels: Category-UI Type-Defect
Comment 2 by rjrjr+pe...@google.com, Feb 24, 2009
(No comment was entered for this change.)
Status: Accepted
Owner: jlaba...@google.com
Sign in to add a comment