Q:

Invisble gwt chart when placed into an HTMLPanel

I'm experiencing a very weird issue and I honestly don't know what is going on...
I'm trying to load a dummy chart in a GWT project. While this works perfectly fine:
/**
 * This is the entry point method.
 */
public void onModuleLoad() {
    Window.enableScrolling(false);
    Window.setMargin("0px");
    RootLayoutPanel.get().add(getSimpleLayoutPanel());
            // Create the API Loader
    ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
    chartLoader.loadApi(new Runnable() {

        @Override
        public void run() {
            getSimpleLayoutPanel().setWidget(getPieChart());
            drawPieChart();
        }
    });
}
    private SimpleLayoutPanel getSimpleLayoutPanel() {
    if (layoutPanel == null) {
        layoutPanel = new SimpleLayoutPanel();
    }
    return layoutPanel;
}

private Widget getPieChart() {
    if (pieChart == null) {
        pieChart = new PieChart();
    }
    return pieChart;
}

private void drawPieChart() {
    // Prepare the data
    DataTable dataTable = DataTable.create();
    dataTable.addColumn(ColumnType.STRING, "Name");
    dataTable.addColumn(ColumnType.NUMBER, "Donuts eaten");
    dataTable.addRows(4);
    dataTable.setValue(0, 0, "Michael");
    dataTable.setValue(1, 0, "Elisa");
    dataTable.setValue(2, 0, "Robert");
    dataTable.setValue(3, 0, "John");
    dataTable.setValue(0, 1, 5);
    dataTable.setValue(1, 1, 7);
    dataTable.setValue(2, 1, 3);
    dataTable.setValue(3, 1, 2);

    // Draw the chart
    pieChart.draw(dataTable);
}

And I get the expected output:

When I try to place the chart inside a HTMLPanel:
    /**
 * This is the entry point method.
 */
public void onModuleLoad() {
    Window.enableScrolling(false);
    Window.setMargin("0px");

    HTMLPanel html = new HTMLPanel("<div id='container'></div>");
    html.add(getSimpleLayoutPanel(), "container");
    RootPanel.get().add(html);
    html.setVisible(true);

    //        RootLayoutPanel.get().add(getSimpleLayoutPanel());

    // Create the API Loader
    ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
    chartLoader.loadApi(new Runnable() {

        @Override
        public void run() {
            getSimpleLayoutPanel().setWidget(getPieChart());
            drawPieChart();
            getSimpleLayoutPanel().setVisible(true);
            getSimpleLayoutPanel().getWidget().setVisible(true);

        }
    });
}

Results in a white screen, weird enough, if I inspect the DOM with Firebug, I can see the "chart" there...I mean, the svg file that composes the chart:
<div aria-hidden="false"><div id="container"><div aria-hidden="false" style="position: relative;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;">&nbsp;</div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 100%; height: 100%;"><div aria-hidden="false" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;"><div dir="ltr" style="position: relative; width: 1525px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg style="overflow: hidden;" height="200" width="1525"><defs id="defs"></defs><rect fill="#ffffff" stroke-width="0" stroke="none" height="200" width="1525" y="0" x="0"></rect><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="87" width="453" y="38" x="934"></rect><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="38" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="50.75" x="955" text-anchor="start">Michael</text></g><rect fill="#3366cc" stroke-width="0" stroke="none" height="15" width="15" y="38" x="934"></rect></g><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="62" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="74.75" x="955" text-anchor="start">Elisa</text></g><rect fill="#dc3912" stroke-width="0" stroke="none" height="15" width="15" y="62" x="934"></rect></g><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="86" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="98.75" x="955" text-anchor="start">Robert</text></g><rect fill="#ff9900" stroke-width="0" stroke="none" height="15" width="15" y="86" x="934"></rect></g><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="15" width="453" y="110" x="934"></rect><g><text fill="#222222" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="122.75" x="955" text-anchor="start">John</text></g><rect fill="#109618" stroke-width="0" stroke="none" height="15" width="15" y="110" x="934"></rect></g></g><g><path fill="#3366cc" stroke-width="1" stroke="#ffffff" d="M525,100L525,38A62,62,0,0,1,584.6331898767148,116.96710538446915L525,100A0,0,0,0,0,525,100"></path></g><g><path fill="#109618" stroke-width="1" stroke="#ffffff" d="M525,100L483.23087009391344,54.181447132319164A62,62,0,0,1,525,38L525,100A0,0,0,0,0,525,100"></path></g><g><path fill="#ff9900" stroke-width="1" stroke="#ffffff" d="M525,100L465.36681012328523,116.96710538446915A62,62,0,0,1,483.2308700939135,54.18144713231911L525,100A0,0,0,0,0,525,100"></path></g><g><path fill="#dc3912" stroke-width="1" stroke="#ffffff" d="M525,100L584.6331898767148,116.96710538446915A62,62,0,0,1,465.36681012328523,116.96710538446918L525,100A0,0,0,0,0,525,100"></path><text fill="#ffffff" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="140.04361653961504" x="504.5" text-anchor="start">41.2%</text></g><g></g></svg></div></div><div style="display: none; position: absolute; top: 210px; left: 1535px; white-space: nowrap; font-family: Arial; font-size: 15px;">John</div><div></div></div></div></div></div></div>

Now as you can see, for some reason is set to "hidden"....any idea why???? Going nuts with this!
Thanks,
Alex

A:

Try setting an explicit width and height to your HTMLPanel and to your SimpleLayoutPanel. Since HTMLPanel does not implement RequiresResize and ProvidesResize, you need to set an explicit size.
For resizing to work properly, you must have "an unbroken hierarchy between all widgets that implement RequiresResize and the RootLayoutPanel, which listens for any changes (such as the browser window resizing) that could affect the size of widgets in the hierarchy".
For more info see: http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#Resize

