CSS Positioning Persists

[egyptianbman]

paper-dialog seems to persist the "top" value generated on open. This causes reuse of a dialog with different data to no longer be vertically centered.

Consider a scenario where a dialog may have an image for some items, but not an image for others. This may cause the dialog to be much higher for the items with images than the dialog for the items without an image.

(without image)

(with image)

(with image, after reloading -- without having selected the "add" button first)

Looking through the documentation, I couldn't find any way to "reset" the positioning. Please advise if there is; thanks!

[morethanreal]

Is this case for changing the dimensions of the dialog when it is still open? The documentation is lacking, but you can call updateTargetDimensions to update the size of the dialog.

[egyptianbman]

Hey @morethanreal, I have a core-selector that upon clicking, opens a paper-dialog. The dialog is closes, then clicking the next element in the core-selector would trigger updating the content inside the paper-dialog, then calling .toggle().

I tried calling updateTargetDimensions:

<paper-dialog id="dialog" heading="heading" transition="paper-dialog-transition-center" backdrop="true">
  ...
  ..content..
  ...
</paper-dialog>
<script>
  (function () {
    'use strict';
    Polymer('modal-partner', {
      show: function() {
        this.$.dialog.toggle();
        this.$.dialog.updateTargetDimensions();
      }
    });
  })();
</script>

but got the following error: Uncaught TypeError: undefined is not a function.

[atoy40]

Hello,

I've the same problem, and this behavior also : The first time you open (toggle) the dialog ... you can resize the browser window, the dialog is recenter dynamically. But if you close and then reopen it, it'll keep the position it has when you've closed it and will never be recentered.

Anthony.

[morethanreal]

@egyptianbman The updateTargetDimensions api is only available in Polymer 0.5.0. If you're using an older version and cannot upgrade, you can do dialog.$.overlay.updateTargetDimensions.

@atoy40 Do you have a jsbin showing the issue? I cannot reproduce it using the demos at http://www.polymer-project.org/components/paper-dialog/demo.html

[egyptianbman]

@morethanreal, no change. In trying to figure out what's going on, here's what I have:

I added

console.log(JSON.stringify({
  top: target.top,
  bottom: target.bottom
}));

at https://github.com/Polymer/core-overlay/blob/master/core-overlay.html#L459 to allow me to see what target holds.

My code for opening reads as follows:

var overlay = this.$.dialog.$.overlay;
overlay.open();
overlay.discoverDimensions();
overlay.updateTargetDimensions();

Note, I couldn't call just updateTargetDimensions() as I kept getting Uncaught TypeError: Cannot read property 'size' of undefined at core-overlay.html:538. Calling discoverDimensions first generated this.dimensions for use (I suppose).

The interesting thing I'm seeing, is in opening one modal after another, I see this in the console:

{"top":"auto","bottom":"auto"}
{"top":"91px","bottom":"auto"}
{"top":"91px","bottom":"auto"}
{"top":"91px","bottom":"auto"}

Here, I'm cycling from one modal to the other -- I should get alternating numbers, with the first one being autos. This tells me this.target's css is not being updated.

---

After much much more digging and trying every single public method to execute in core-overlay to no avail, I finally was able to figure out something that worked:

var overlay = this.$.dialog.$.overlay;
overlay.open();
overlay.discoverDimensions();
overlay.dimensions.position.v = null;
overlay.dimensions.position.h = null;
overlay.repositionTarget();

I found a lot of if value exists, skip logic which I believe may be what's causing the lack of dimension updating.

[Mikanoshi]

Dialog position also doesn't take scroll bars into account. I tried to position an aligned tooltip under dialog that matches its width and had to add left margin when document's scrollHeight exceeds height.

[MehmetKursat]

@egyptianbman Hi, would you please give some more detail on how you fixed it because I'm having the same problem and applying your solution didn't fix it.

[bittenbytailfly]

This only seems to be an issue if you are putting dynamic content into the dialog, presumably because it doesn't know the dimensions in advance.

I've tried your fix @morethanreal - but on the latest version (0.5.4), it doesn't seem to do anything.

[MehmetKursat]

Yeah, dynamic content, only on second load of the same element is correctly shown.

[bittenbytailfly]

After a bit of searching, I've just resolved this (at least in my app).

It seems the position is wrong because the DOM is changing after the dialog opens - this is easily corrected with the async command, which ensures the dialog opens after the DOM has changed.

It's described here:

https://www.polymer-project.org/docs/polymer/polymer.html

See my latest commit on my project for an example:

https://github.com/bittenbytailfly/deadbolt-password-generator-chrome-mobile-app/commit/3e1f5db818af47bd6843d612c4d4d95a2fc59268

Hope this is of some help to somebody.

[MehmetKursat]

@bittenbytailfly Very well done, I resolved my issue with your way too, thanks for sharing.

[lucyhe]

@bittenbytailfly thank you so much, this was exactly what I was looking for.