聚合物纸对话框未居中
Polymer paper-dialog not centered
在我的 Polymer 应用程序中,当我使用 iPhone 打开纸质对话框时,它没有居中,这与使用 Chrome 或 Safari 使用桌面 [=33= 打开它相反] 或 PC.
我正在动态构建 paper-dialog 元素并使用 javascript 将其放置在 DOM 模板中,然后调用 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();
我没有使用任何特殊样式或媒体查询。
我以编程方式添加对话框的原因是因为我有大量不同的对话框消息和不同的内容要在不同的时间显示,并且每个人都应该在不同的屏幕上调用回调,这取决于谁添加了对话框。换句话说,我需要像 angular-material's $mdDialog 那样添加我的对话框,我知道这对于聚合物来说并不是那么微不足道,也许不是预期用途,但对于我来说这就是我所需要的,除非有更好的方法。
查看下面的问题截图
iPhone:
Chrome:
问题是我在 var b = Polymer.dom(this.root).appendChild(d);
之后立即调用了 b.open();
。
由于我是动态添加元素的,所以我应该将 b.open();
置于 this.async()
调用之下,如 polymer's documentation 中针对类似情况所述。
还修复了我 dialog-manager
中的代码
在我的 Polymer 应用程序中,当我使用 iPhone 打开纸质对话框时,它没有居中,这与使用 Chrome 或 Safari 使用桌面 [=33= 打开它相反] 或 PC.
我正在动态构建 paper-dialog 元素并使用 javascript 将其放置在 DOM 模板中,然后调用 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();
我没有使用任何特殊样式或媒体查询。 我以编程方式添加对话框的原因是因为我有大量不同的对话框消息和不同的内容要在不同的时间显示,并且每个人都应该在不同的屏幕上调用回调,这取决于谁添加了对话框。换句话说,我需要像 angular-material's $mdDialog 那样添加我的对话框,我知道这对于聚合物来说并不是那么微不足道,也许不是预期用途,但对于我来说这就是我所需要的,除非有更好的方法。
查看下面的问题截图
iPhone:
Chrome:
问题是我在 var b = Polymer.dom(this.root).appendChild(d);
之后立即调用了 b.open();
。
由于我是动态添加元素的,所以我应该将 b.open();
置于 this.async()
调用之下,如 polymer's documentation 中针对类似情况所述。
还修复了我 dialog-manager
中的代码