Redraw issue with Firefox

[tdoty]

Forgive me if this is a known issue already. Whenever I draw some GWT widgets on SmartGWT Canvases, I run into an issue where only part of the widget is drawn. However, if the browser is forced to redraw (resize, move, etc) then it will draw correctly after the browser redraw (none of the generated HTML changes at all).

1. the SmartGWT or SmartClient version and browser version(s) involved;
2.3 LGPL from a 2ish week old nightly

5. sample code.
Since I am dealing with the GWT Visualization currently, that is what my example uses (code found here: http://code.google.com/p/gwt-google-...GettingStarted ). However, using something like the GWT RichTextArea instead of the PieChart will produce the same results.

   public void onModuleLoad() {
     
     final VLayout main = new VLayout();
     
     ButtonItem addStuff = new ButtonItem("addStuff", "Add Stuff...");
     addStuff.addClickHandler(new ClickHandler()
     {
       @Override
       public void onClick(ClickEvent event)
       {
         Runnable onLoadCallback = new Runnable() {
           public void run() {
      
             // Create a pie chart visualization.
             PieChart pie = new PieChart(createTable(), createOptions());

             pie.addSelectHandler(createSelectHandler(pie));
             main.addMember(pie);
           }
         };

         // Load the visualization api, passing the onLoadCallback to be called
         // when loading is done.
         VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);

       }
     });
     
     DynamicForm form = new DynamicForm();
     form.setFields(addStuff);
     main.addMember(form);
     main.setWidth100();
     main.setHeight100();
     main.draw();
   }
   
   private Options createOptions() {
     Options options = Options.create();
     options.setWidth(400);
     options.setHeight(240);
     options.set3D(true);
     options.setTitle("My Daily Activities");
     return options;
   }

   private SelectHandler createSelectHandler(final PieChart chart) {
     return new SelectHandler() {
       @Override
       public void onSelect(SelectEvent event) {
         String message = "";
         
         // May be multiple selections.
         JsArray<Selection> selections = chart.getSelections();

         for (int i = 0; i < selections.length(); i++) {
           // add a new line for each selection
           message += i == 0 ? "" : "\n";
           
           Selection selection = selections.get(i);

           if (selection.isCell()) {
             // isCell() returns true if a cell has been selected.
             
             // getRow() returns the row number of the selected cell.
             int row = selection.getRow();
             // getColumn() returns the column number of the selected cell.
             int column = selection.getColumn();
             message += "cell " + row + ":" + column + " selected";
           } else if (selection.isRow()) {
             // isRow() returns true if an entire row has been selected.
             
             // getRow() returns the row number of the selected row.
             int row = selection.getRow();
             message += "row " + row + " selected";
           } else {
             // unreachable
             message += "Pie chart selections should be either row selections or cell selections.";
             message += "  Other visualizations support column selections as well.";
           }
         }
         
         Window.alert(message);
       }
     };
   }

   private AbstractDataTable createTable() {
     DataTable data = DataTable.create();
     data.addColumn(ColumnType.STRING, "Task");
     data.addColumn(ColumnType.NUMBER, "Hours per Day");
     data.addRows(2);
     data.setValue(0, 0, "Work");
     data.setValue(0, 1, 14);
     data.setValue(1, 0, "Sleep");
     data.setValue(1, 1, 10);
     return data;
   }

Click the button. Notice that only part of the chart is drawn (at least in Firefox 3.6.10). It works in IE7 and IE8 (no other browsers tested). Is there a workaround I can use to force it to redraw, regardless of which browser it is in?

Thanks for the help. Let me know if I can provide any more details.

[mattjcurry]

Same issue Here....

It seems to be caused by this HTML code:

<div onscroll="return isc_WidgetCanvas_0.$lh()" style="position: absolute; left: 0px; top: 0px; width: 100px; height: 100px; z-index: 200576; -moz-box-sizing: border-box; overflow: hidden;" class="normal" eventproxy="isc_WidgetCanvas_0" id="isc_2V">

It looks like the height and width get set to 100px by default on this div and there is no way to change it. I have tried everything I can think of.

[mattjcurry]

So, I think what is happening is that SmartGWT is determining the size of the components before they are done being generated. Since there is nothing there, then the size gets set as the default.

I just added this to my callback and it seems to have fixed the issue for me:

chart = new ColumnChart(createTableL(), createOptions());
				addChild(chart);
				for(Canvas child : getChildren()) {
					child.setHeight100();
					child.setWidth100();
				}
				draw();

Let me know if this works for you.

[GeneL]

Great!
This worked for me.
Thanks