programmatically injected paper-dialog: style='max-height: 0px' ?!

Adam McKee

unread,

Jul 11, 2015, 9:08:25 AM7/11/15

to polym...@googlegroups.com

Hi,

In my project I'm creating a paper-dialog with JavaScript similar to this:

var fragment = "<paper-dialog id='mydialog' modal='true' ...>...</paper-dialog>";

$('body').append(fragment);

var $dialog = $('#mydialog');

var dialog = $dialog.get(0);

Polymer.Base.async(function(){

dialog.toggle();

// correct the unfathomable style "max-height: 0px;" applied to the dialog after toggle() is called

if ($dialog.css('max-height') == '0px') $dialog.css('max-height', 'none');

}, 1);

What I find is: after dialog.toggle(), the dialog element is given the style "max-height: 0px" (in its style attribute). Does anyone know why on Earth this would happen? Max-height of 0 is totally unexpected.

Thanks for any ideas!

Bin Wang

unread,

Jul 12, 2015, 9:08:32 AM7/12/15

to polym...@googlegroups.com

I think it's a bug of iron-fit-behavior, I have filed an issue .

Solution: wrap your dialog into a top-left positioned div, like this:

<body>
...
<div id="modals-container" style="position:absolute;top:0;left:0">
...your dialogs here
</div>
</body>

Good luck!

Adam McKee

unread,

Jul 12, 2015, 4:47:53 PM7/12/15

to polym...@googlegroups.com

It seems I've run into the same bug you've already reported. I think your workaround is better than removing the 'max-height' style after it's been erroneously applied.

Thanks for your help!

Reply all

Reply to author

Forward