PopupPanel.center() not centering content?

[Ed]

What is the correct way to center content as a popup in the middle of the page?

I am asking this because if I use  GWT PopupPanel.center() method, it will not correctly center it's content, however the top left corner will be in the center of the page ;)..

If however, I overrridde the PopupPanel.center() method, such that it performs first the show() action and then the center code in a Deferred Command, it will be correctly centered.

I think this is because of the dimensions that are correctly calculated by the browser at the end current call stack (when it's attached to the root panel), such that you have to center it in the deferred command...

Is this so? 

What is the correct way to center something in the middle of the page?

And why does GWT not center the content in a deferred way?

I prefer not to use the deferred way as in the past it gave me some problems when in the meantime something happens, like the content was removed/changed such that you have to build all kind of guards to check this :(...

- Ed

[Thomas Broyer]

Getting the size of the added content should be enough to trigger a reflow so the dimensions are OK and so is the positionning.

It might be that browsers have changed their strategies wrt hidden content (visibility:hidden, not display:none, which is expected to not have dimensions)

At least that's the explanation for why GWT does what it does.

Are you experiencing this in more than one browser? which one(s)?

[Ed Bras]

An example:

Attacheded:  the FF (19,02), Chrome (24), IE (10) screenshot (I hope the attachment work).

Code:

---

final PopupPanel popup = new PopupPanel(true);

popup.setWidget(getEnsureLogin());

popup.center();

----

I am not sure if it's the browsers that changed anything.

I remember that this was like this in the past also. In my own ModalPanel class that shows a glasspanel and some other popup  (animtation) stuff, I always center in a deferred command, other wise I couldn't get it to center correctly......

What's your experience?

- Ed

[Thomas Broyer]

This is strange, I'd swear it used to work…

It must then be a lower-level change, as I don't see anything suspicious in the latest changes to PopupPanel or any ancestor class.

[Jens]

This is strange, I'd swear it used to work…

It must then be a lower-level change, as I don't see anything suspicious in the latest changes to PopupPanel or any ancestor class.

We use PopupPanel.center() for showing wizards. Also we calculate optimal wizard sizes before first showing the wizard and also inside Window.addResizeHandler() and finally calling center() after the new wizard size has been calculated and applied to the PopupPanel (setPixelSize()). We do all this without a deferred command and haven't had an issue with it.

-- J.

[Thomas Broyer]

I suppose Ed does not set the popup size explicitly and relies on the intrinsic size of the content. And strangely getOffsetWidth() returns 0 so the top-left corner is positioned at the center of the viewport (and then only the popup gets its "actual" intrinsic dimensions, but it's too late; but getOffsetWidth should have triggered a reflow AFAICT, this is why I don't understand why it doesn't work)

[Ed Bras]

> This is strange, I'd swear it used to work…

Could you please try this and see if you have the same result as me?

> I suppose Ed does not set the popup size explicitly and relies on the intrinsic size of the content.

Yes, exactly, I don't calculate anything (just like the code shows). I don't even see why/how I want to do this

>Also we calculate optimal wizard sizes before first showing the wizard 

@Jens: what do you exactly mean by this? (how/why)

Doesn't CSS contain the w/h value's,  or doesn't this depend on your content w/h.. (the intrinsic dimensions like Thomas mention)

[Jens]

I just changed my code a bit and removed any explicit sizes on the PopupPanel itself. Now when adding a Label without any size or something else with explicit sizes everything still works as expected without using any deferred command.

@Ed: We use LayoutPanel inside PopupPanel so either the PopupPanel or the LayoutPanel needs an explicit size. We choose to give the PopupPanel an explicit size. The size itself is in pixel (small wizards, large wizards, etc.) and because we want the wizard to always stay at the center of the screen and the wizard should always fit inside the visible browser window during window resizes we have to recalculate its pixel size and then calling center() again. 

We mainly did that for iPad compatibility so that the wizard does not have an odd position/size when you rotate the iPad from landscape to portrait or vice versa while the wizard is visible.

-- J.

[Ed Bras]

Can somebody please test the above centering of the popup ?

Let's confirm that it's not only me such that I can report it as a bug.

Any ideas for workarounds? (some action to trigger the correct dimensions)

- Ed

-- J.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/RWjYAPGq9xw/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Hilco Wijbenga]

On 22 March 2013 12:41, Ed Bras <post2...@gmail.com> wrote:
> Can somebody please test the above centering of the popup ?
> Let's confirm that it's not only me such that I can report it as a bug.

I haven't tried your exact use case but I can confirm that centering
does not always work. Sometimes you have to use a deferred command.

> Any ideas for workarounds? (some action to trigger the correct dimensions)

Other then using a deferred command, no. One would think that first
showing the popup (forcing its dimensions to become known) before
calling center() would fix it but that does not seem to be the case.
At least not when I tried it. :-)

[Jens]

Can somebody please test the above centering of the popup ?

Let's confirm that it's not only me such that I can report it as a bug.

Any ideas for workarounds? (some action to trigger the correct dimensions)

 

The code below works for me in FF 19.0.2, Chrome 25.0.xxxxx (using GWT 2.5.1 and the Clean theme). Not sure why it does not work in your app. Do you do any heavy work while before/after showing the PopupPanel? Do you use CSS 3 transitions/animations that you can disable temporary? What happens in your app when you don't add "getEnsureLogin()" to the Popup but just a FlowPanel with some Labels like the code below?

-- J.

public class PopupPanelTest implements EntryPoint {

  public void onModuleLoad() {
    Button showPopup = new Button("Show");
    showPopup.addClickHandler(new ClickHandler() {
      @Override
      public void onClick(ClickEvent event) {

        PopupPanel popup = new PopupPanel(true);

        popup.setWidget(createPopupContent());
        popup.center();
      }
    });

    RootPanel.get().add(showPopup);
  }

  private Widget createPopupContent() {
    FlowPanel content = new FlowPanel();
    content.add(new Label("Elit Lorem Vulputate. Elit Lorem Vulputate"));
    content.add(new Label("Fringilla Risus Tellus Sollicitudin Commodo. Fringilla Risus Tellus Sollicitudin Commodo"));
    return content;
  }

}

 

[Ed Bras]

Hi Jens,

Thanks for the code example.

I tired it and your code example works, see attachment.

However, instead of setting the popup content you created in the above method "createPopupContent" I added a panel of my own (in the same html  page), and it's not centered ;(..

I disabled any animation (fade in) and borders/shading effects. As you can see, what's left is just a stupid panel with hardly any content. 

I don't understand why it's not centered.

I played around with it, but could it get it to center, like:

+ Removing almost all styles, also the width of the outer panel.

+ However, If I use only the outer panel that contains the inner content, and fill it with some text as done in your example, it does center.

So adding text will center it, but not putting panels in panels in panels... etc.. with some basic styles...

Any idea?

- Ed

[Ed Bras]

Any idea?

Should I report this as a bug? And what are the possible workarounds?

[Jens]

Can you share code for a popup content that reproduces the problem?

-- J.

[Ed Bras]

I will do, I just have to isolate the code, such that it's useful. I will post it here in a few days.

On Sat, Mar 30, 2013 at 2:34 PM, Jens <jens.ne...@gmail.com> wrote:

Can you share code for a popup content that reproduces the problem?

-- J.

--

[Ed Bras]

I tried to isolate it to some GWT-only code, but didn't manage to get it isolated with the centering problem :( (at least not within some acceptable time).

I use many own widgets/panels with own resource bundles and style imports.

I removed all the animations, but even when using a simple HeaderPanel (own widget) with some textboxes I see the centering problem, which consists of straight forwards div's with no deferred command actions... but still... if I use s simple FlowPanel with some textboxes it all looks fine :(...

For now, I leave it like this but I am almost sure it's a bug that only show it's self in some weird situation... Maybe due to using style imports and using css resources, some style is set a bit "too" late, I don't know...

For now, my working around works, so I leave it for now.

Thanks,

- Ed

[Saad S]

I too am experiencing this problem in my code, where I have a large hierarchy of panels contained within the PopupPanel or DecoratedPopupPanel.  A simple GWT Designer app with a label in the PopupPanel or DecoratedPopupPanel works as expected.

[Ed Bras]

I currently center it by adding the content, that needs to be centered to a container div that has a style that will take care of the styling (something like margin: auto; position:absolute; left:0; top:0; bottom:0; right:0). Note: i don't use fixed as position such that I can move the whole container div just under body, such that I can move the whole screen, which I need if a left/right menu slides in (just like facebook menu).