SuggestBox hides RootLayoutPanel and all its contents

[Jorge]

I'm running 2.0 with Eclipse, plus IE 7.

I created an application that uses UIBinder. The main object is a
DockLayoutPanel that is added to the RootLayoutPanel, exactly like
the Mail sample for 2.0.

The Center container has a Widget that has a SuggestBox and some
TextBoxes, my problem is that when the pop-up of the SuggestBox is
shown, all the background goes white, and when its closed the form
goes back to normal (the dialog contains the correct suggestions, so
besides the visual problem, it's working fine)

Since I'm using UIBinder, I used @UiField(provided=true) and then
instantiated the SuggestBox in the constructor of my Widget, because
the constructor takes the Oracle.

If I go to the EntryPoint and instead of creating the RootLayoutPanel,
I add the Widget to RootPanel, works fine. Plus, this problem is not
present in FF 3.5.6

I replicated the same problem, adding a SuggestBox to the TopPanel on
the Mail sample.

I did the following:

In TopPanel.ui.xml, inside an existing Div, added

<g:SuggestBox ui:field="test"></g:SuggestBox>

In TopPanel.java added

@UiField(provided=true) SuggestBox test;

public TopPanel() {

MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("Dog");
oracle.add("Cat");
oracle.add("Bird");

test = new SuggestBox(oracle);

initWidget(binder.createAndBindUi(this));
}

And that generates the problem.

Any ideas would be kindly appreciated
Thank You
Jorge

[Jorge]

It's been a couple of weeks since I posted this, I wonder if I'm
asking a dumb newbie cuestion.

I've searched this group and I can't find any solutions. Could anyone
be so kind to point me in to the right direction?

Thank you.

On Dec 30 2009, 3:46 pm, Jorge <jsle...@gmail.com> wrote:
> I'm running 2.0 with Eclipse, plus IE 7.
>
> I created an application that uses UIBinder. The main object is a
> DockLayoutPanel that is added to the  RootLayoutPanel, exactly like
> the Mail sample for 2.0.
>

> The Center container has a Widget that has aSuggestBoxand some

> TextBoxes, my problem is that when the pop-up of theSuggestBoxis
> shown, all the background goes white, and when its closed the form
> goes back to normal (the dialog contains the correct suggestions, so
> besides the visual problem, it's working fine)
>
> Since I'm using UIBinder, I used @UiField(provided=true) and then

> instantiated theSuggestBoxin the constructor of my Widget, because

> the constructor takes the Oracle.
>
> If I go to the EntryPoint and instead of creating the RootLayoutPanel,
> I add the Widget to RootPanel, works fine. Plus, this problem is not
> present in FF 3.5.6
>

> I replicated the same problem, adding aSuggestBoxto the TopPanel on

> the Mail sample.
>
> I did the following:
>
> In TopPanel.ui.xml, inside an existing Div, added
>

> <g:SuggestBoxui:field="test"></g:SuggestBox>

[UJ]

I have never experienced this but its seems a browser specific
problem.

Specially when we try to populate GWT content in DIV, the display
creates one or other problem for sure :-).

The GWT is in itself a dynamic content so my personal suggestion is to
render your code directly using GWT API only for example using classes
like VerticalPenel, HorizontalPanel etc. and using setStyleName()
method to set the CSS applicable for the concerned widget to position
or decorate the content accordingly.

I do not see any requirement for the DIV since GWT itself handles all
the possible facilities of dynamic HTML.

Hope it helps you!

Regards,
Upendra Jariya.

[Isaac Truett]

Jorge,

Can you use a DOM inspector to examine that white overlay? I would
guess that you have an opaque "glass panel" and you just need to set
some CSS to make it transparent. Knowing what that white thing really
is would help.

- Isaac

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>
>
>
>

[Jorge]

Issac and Upendra,

Thank you for your response.

I don't seem to find any white overlay, when the popup shows GWT adds
an Iframe and a div, I understand that the Iframe is there to make the
popup draw over such elements as Select inputs and it's positioned
exactly surrounding the popup. The div contains the suggestions.

I have replicated the same problem in various ways, in IE7 and IE8
compatibility mode, for example, with a DialogBox, if I call center()
first and then show() all goes blank but the DialogBox, if I call
first show() and then center() every works fine. In the mail sample
(2.0) they are called in that order, and if I swap them also goes
blank.

Another blank screen appears also when I use ListGrid from SmartGwt,
that has a little popup to sort the columns, I was running a sample
code.

The problem only is caused when attaching widgets to RootLayotPanel
and using Standards Mode. If I use RootPanel, everything works. My BIG
problem is that I'm using DockLayoutPanels and UiBinder to layout the
application.

The folowing code causes the problem, hope it can be more
illustrative. Here I'm not using UiBinder, just a few lines of code to
generate and populate the DockLayoutPanel

--------------------------------------------------
Test.java
--------------------------------------------------

package test.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SuggestBox;

public class Test implements EntryPoint {

public void onModuleLoad() {
DockLayoutPanel main = new DockLayoutPanel(Unit.EM);
//Some text
Label text = new Label("This text is going to dissapear");
text.setStyleName("big-text");
main.addNorth(text,20);
//SuggestBox

MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();

oracle.add("Cat");
oracle.add("Dog");
oracle.add("Bird");
SuggestBox suggest = new SuggestBox(oracle);
main.add(suggest);
RootLayoutPanel.get().add(main);

}
}

--------------------------------------------------
Test.html
--------------------------------------------------
<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<title>Test</title>
<style>.big-text{font-size:20px;}</style>
<script type="text/javascript" language="javascript" src="test/
test.nocache.js"></script>
</head>
<body></body>
</html>

[Carlo]

I am getting this behavior with any PopupPanel in IE7, and it is a
real killer. I've been moving a 1.71 app to 2.0.0 and in the process
changed from DockPanel to DockLayoutPanel. I've tried every DOCTYPE I
can think of and nothing will change the behavior. Any new insight
into this one?

[hriess]

Is there in the meantime a solution for this problem? I am using a
DockLayoutPanel for the layout of the application. A SuggestBox (and
other PopupPanels) blanks the complete screen in IE7. After upgrade to
GWT 2.0, UiBinder and LayoutPanels I haven't tested my application
with IE7 for a long time. Have I to go back in time and check out a
rather old SVN version of my application?

Thank you
Holger

[Stefano Ciccarelli]

This is my dirty solution:

<!-- To solve a Popup bug in IE7 -->
<!-- the code doesn't works anymore on IE6 -->
<replace-with class="com.google.gwt.user.client.ui.impl.PopupImpl">
<when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl"/>
<when-property-is name="user.agent" value="ie6" />
</replace-with>

but you have to drop IE6 support.

[hriess]

Thank you, Stefano. I've seen this solution already in Issue 4352 -
but I don't understand, how it works. Unfortunately it solves only the
problem with the SuggestBox , not with some of my PopupPanel based
widgets.