In my polymer app, when I open a paper-dialog using an iPhone, it's not centered, as opposed to opening it using Chrome or Safari using the a desktop Mac or PC.
I'm dynamically constructing the paper-dialog element and placing it in the DOM template using javascript, and then calling open()
:
var d = document.createElement('paper-dialog');
d.innerHTML = "<h2>Dialog Title</h2>"
"<p>some content</p>"+
'<div class="buttons">'+
"<paper-button >More Info...</paper-button>"+
"<paper-button dialog-dismiss>Decline</paper-button>"+
"<paper-button dialog-confirm autofocus>Accept</paper-button>"+
"</div>";
var b = Polymer.dom(this.root).appendChild(d);
b.open();
I'm not using any special styles or media queries. The reason I'm adding the dialog programatically is because I have tons of different dialog messages and different contents to show at different times, and each of them should call a callback at a different screen, depends on who added the dialog. in other words, I need to have my dialogs added like in angular-material's $mdDialog, I know it's not that trivial for polymer, maybe not the intended use, but for my case that's what I need, unless there's a better way.
See screenshot of the problem below
iPhone:
Chrome: