Showing unneccessary scrollbar.

[urquanx]

I used the "Basics->HTML->Load HTML pages in IFrame" example's source code from the SmartGWT showcase page but in my case an extra vertical scrollbar is appearing in the component and resulting in a double scrollbar view.
I uploaded the attachment image that shows the page.

How can I get rid of the extra scrollbar? Thanks in advance.

Anyone tried the code and having the same problem ?

Edit: Running on Windows XP,Mozilla 3.6.8, SmartGWT 2.2

Code from showcase

import com.smartgwt.client.types.ContentsType;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.HTMLPane;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VLayout;

public class IFramesSample implements EntryPoint {

    public void onModuleLoad() {
        VLayout layout = new VLayout();
        layout.setWidth100();
        layout.setHeight100();

        final HTMLPane htmlPane = new HTMLPane();
        htmlPane.setShowEdges(true);
        htmlPane.setContentsURL("http://www.google.com/");
        htmlPane.setContentsType(ContentsType.PAGE);

        HStack hStack = new HStack();
        hStack.setHeight(50);
        hStack.setLayoutMargin(10);
        hStack.setMembersMargin(10);

        IButton yahooButton = new IButton("Yahoo");
        yahooButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                htmlPane.setContentsURL("http://www.yahoo.com/");
            }
        });
        hStack.addMember(yahooButton);

        IButton googleButton = new IButton("Google");
        googleButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                htmlPane.setContentsURL("http://www.google.com/");
            }
        });
        hStack.addMember(googleButton);

        IButton wikipediaButton = new IButton("Wikipedia");
        wikipediaButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                htmlPane.setContentsURL("http://www.wikipedia.org/");
            }
        });
        hStack.addMember(wikipediaButton);

        IButton baiduButton = new IButton("Baidu");
        baiduButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                htmlPane.setContentsURL("http://www.baidu.com/");
            }
        });
        hStack.addMember(baiduButton);

        layout.addMember(hStack);
        layout.addMember(htmlPane);
        layout.draw();
    }

}

[urquanx]

Too bad no one has at least tried the source code :(

[bartyhoho]

I had the same problem. Although I don't have a good solution, I can at least hide the scrollbar by setting its size to 0. Like this:

htmlPane.setScrollbarSize(0);

[urquanx]

Thanks I'll try it and tell if it works.

[urquanx]

That solved the problem thanks a lot! There has to be a more natural way to do it though.

[caiyunfei]

I meet the same problem. Is there someone being able to resovle it?

[caiyunfei]

Isn't there anyone can resolve the problem?

[garyswindell]

I am having the same issue. Why does the extra scroll bar appear?

[iHATEsmartgwtALOT]

Smart GWT 3.0 still has the issue. Somewhere mentioned using:

htmlPane.setOverflow(Overflow.HIDDEN);

...but no worky because now 0 scrollbars are show instead of the desired 1 scrollbar. I only got success when using CSS:

htmlPane.addStyleName("noscroll");

.noscroll {
overflow: hidden !important;
}

This works in Firefox 11, Chrome 19 & 20, and IE 9.

PS: the username "iHATEsmartgwt" was already taken. i guess i'm not surprised.

[Isomorphic]

Direct your ire properly..

This kind of thing can be introduced because of the CSS used by core GWT themes (see FAQ), bad DOCTYPE settings, or weirdness in the included site.

There really is no general fix because iframes are flaky and security restrictions prevent us from reaching into the loaded page and trying to detect/adjust for its settings. This is why the docs tell you not to use this mode if at all possible.

As far as this thread, no one has posted enough information for us to investigate any particular case. There's just one guy reposting a Showcase sample saying it didn't work on his machine, but not providing any other details.

So, no need to start flaming the technology - just read and follow the instructions.

[stanleyxu2005]

Direct your ire properly..

This kind of thing can be introduced because of the CSS used by core GWT themes (see FAQ), bad DOCTYPE settings, or weirdness in the included site.

There really is no general fix because iframes are flaky and security restrictions prevent us from reaching into the loaded page and trying to detect/adjust for its settings. This is why the docs tell you not to use this mode if at all possible.

As far as this thread, no one has posted enough information for us to investigate any particular case. There's just one guy reposting a Showcase sample saying it didn't work on his machine, but not providing any other details.

So, no need to start flaming the technology - just read and follow the instructions.

Sorry for bubbled up this quite old thread. After having upgraded from 2.1 (incl. gwt 2.0) to 3.1 (incl. gwt 2.5), both scrollbars are visible. I removed any custom style sheets, but the scrollbars are still there.

The doctype I am using is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

[zerkotin]

i use it allot

1. i use the free smartgwt 3.1 (latest)

2. browsers: chrome, IE9 and FF

3. i get the same problem, i managed to fix it in previous versions of smartgwt and gwt 2.4 by override getInnerHTML like this:

private void initView() {
setHeight100();
setWidth100();
setMinWidth(1);
setMargin(0);
// setScrollbarSize(0);
setShowCustomScrollbars(false);

setShowEdges(false);
setContentsType(ContentsType.PAGE);
}

/**
* this is overriden to remove vertical scrollbar
*/
public String getInnerHTML() {
String innerHTML = super.getInnerHTML();
innerHTML = innerHTML.replaceFirst("iframe height='100%'", "iframe height='99%'");
return innerHTML;
}

but now after i upgraded to gwt 2.5 and latest smartgwt i get those scrollbars again.

how do i get rid of the scrollbar? i tried the doctype thing, it does help the scrollbars but it screws the rest of the HTML styles that i wrote.

currently i use the default HTML5 doctype.

any help would be apreciated... setting scrollbarsize to 0 does not always help.

if you need more info, just ask.

[stanleyxu2005]

if you need more info, just ask.

See my post http://forums.smartclient.com/showthread.php?t=25480

add the following code additionally

this.setAutoSize(true);

[zerkotin]

thank you :D
i managed without it simply by using:
mainPanel.draw();

instead of :
RootPanel.get().add(mainPanel);

at the entry point.

thanks alot, this was actually introduced as a solution by ISOMORPHIC in previous entries.

See my post http://forums.smartclient.com/showthread.php?t=25480

add the following code additionally

this.setAutoSize(true);