paper-toast doesn't show into "fitInto" node about paper-toast HOT 7 CLOSED

so lets step down the inheritance chain of fun 👷

Based on my reading of the source... yes this should work (should being the key word) let me step through my thinking...

paper-toast uses iron-overlay-behavior
https://github.com/PolymerElements/paper-toast/blob/master/paper-toast.html#L124

Which uses IronFitBehavior
https://github.com/PolymerElements/iron-overlay-behavior/blob/master/iron-overlay-behavior.html#L435

Then looking at iron fit behavior

https://github.com/PolymerElements/iron-fit-behavior/blob/master/iron-fit-behavior.html#L201

It should expose a "contrain" fn on the paper-toast element... however when I try to invoke it

note how it is undefined :(

So here in is the mystery, and I think the bug, or just a lack of understand on my part :(

from paper-toast.

@samccone, in v1.1.3 you should be able to see the method defined

The issue is related to the fact that paper-toast will set its bottom, left css properties, and iron-fit-behavior should handle those. I'll further investigate to see what's going on..!

from paper-toast.

awesome thanks!

from paper-toast.

Alright, so this should do the trick http://jsbin.com/rezeru/2/edit?html,output

#fitElement {
  border: 1px solid red;
  padding: 10px;
  position: relative;
}
#toast {
  position: absolute;
}

Even if paper-toast extends iron-overlay-behavior, it limits its features, in order to be always shown on the bottom of the viewport. I'm not sure we should change its position: fixed to position: absolute (even then you'd need to set the parent's position to relative)
cc/ @cdata

from paper-toast.

Update: even simpler, you just have to create a new stacking context for #fitElement http://jsbin.com/rezeru/3/edit?html,output

#fitElement {
  border: 1px solid red;
  padding: 10px;
  transform: translateZ(0);
}

from paper-toast.

Is there a version of this solution that doesn't require the Polymer user to have to set fitInto as well as update their container and toast's CSS? Even if that's well documented someone's going to miss it. :)

from paper-toast.

paper-toast is meant to display on the bottom left by default, so some kind of setting needs to be done by the Polymer user to change the default behavior.
I'm not satisfied with the solution I suggested because it relies on the fact that paper-toast is a child of its fitInto.
The proper way should be that paper-toast shows at the bottom left of its fitInto element; this doesn't require paper-toast to be a child of fitInto.

from paper-toast.