HTMLPane/HTMLFlow in Firefox Don't Resize Correctly

Smart GWT Technical Q&A
1

SmartGWT Power Version:
Isomorphic SmartClient Framework (SC_SNAPSHOT-2011-01-05/PowerEdition Deployment 2011-01-05)

I’m using HTMLPane as an iframe. In Firefox v3.6.19, when I resize the window (to be larger or smaller), the HTMLPane reduces significantly in size. I have the same results using HTMLFlow. I’ve read a few threads in the forums regarding a like topic, but I have not come across a solution.

I’ve attached before and after screen shots.

I’m including a minimal test case.

This is strictly a FF issue as these browsers/revisions resize correctly: Safari v4.0.5, IE v8.0.76 or Chrome v14.0.835.

Thank you in advance.

package com.avenue100.portal.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.smartgwt.client.types.ContentsType;
import com.smartgwt.client.widgets.HTMLPane;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Module to illustrate the rendering problems using HTMLPane
 */
public class Portal implements EntryPoint {

    public void onModuleLoad() {

        // iframe
        final HTMLPane htmlPane = new HTMLPane();
        htmlPane.setShowEdges(true);
        htmlPane.setContentsType(ContentsType.PAGE);
        htmlPane.setContentsURL("http://www.wikipedia.com/");
        htmlPane.setRedrawOnResize(false);
        htmlPane.setWidth100();
        htmlPane.setHeight100();

        // layout
        VLayout layout = new VLayout();  
        layout.setWidth100();
        layout.setHeight100();
        layout.addMember(htmlPane);  

        RootLayoutPanel.get().add(layout);
    }
}

htmlpaneBeforeResize.jpg

htmlpaneAfterResize.jpg

2

I tried the following. It is resizing the htmlpane correctly but the scrolling seems a little off. And also, there is a lot of redraw ad refresh happening. I am using addPeer instead of addChild or addMember. Try it.

public class News extends Canvas{
    HTMLPane htmlPane = new HTMLPane();
	public News(){
		htmlPane.setSize("100%", "100%");
	        htmlPane.setShowEdges(true);  
	        htmlPane.setContentsURL("www.google.com");  
	        htmlPane.setContentsType(ContentsType.PAGE);  
	        addPeer(htmlPane);
	}
}
3

Thank you.

This did help with the browser window resize problem. But now I am seeing the scrollbars, for lack of a better word, ‘flashing’. It’s non-stop on, off, on, off. I tried forcing the htmlPane in the Canvas to a specific height, but that did not help at all.

Any other suggestions are appreciated, thanks again.

4

I have another solution:

Instead of doing the following in the the Entrypoint onmodule() method,
RootLayoutPanel.get().add(mainLayout);
I write,
mainLayout.draw();

where mainLayout is the Canvas containing the htmlpane

                setWidth100();
		setHeight100();
		htmlPane.setSize("100%", "100%");
		htmlPane.setShowEdges(true);
		htmlPane.setContentsURL("http://google.com");
		htmlPane.setContentsType(ContentsType.PAGE);
		addChild(htmlPane);

This miraculously solved my htmlpane resize problem. You should try this out.