Question

我刚刚开始使用ViewContainerRef.createComponent()和polymer-dialog元素。使用标准案例，并按照Polymer网站上的示例，元素显示良好。

但是，我遇到了一个问题。我希望在polymer-dialog-scrollable中显示的内容在标准尺寸对话框中看起来不太好：

我想增加整个对话框的高度，所以我尝试用CSS设置元素样式：

polymer-dialog-scrollable

在简单的HTML中，这应该有效。但实际上，实际上paper-dialog { height: 90%; } paper-dialog-scrollable { height: calc(100% - 128px); /* 128 seemed to account for the header and footer */ }内部div生成了paper-dialog-scrollable，其中包含id和类scrollable，我假设Polymer正在插入。检查这个元素，我看到了这个CSS：

element.style {
  box-styling: border-box;
  max-height: 60px;
  max-width: 1292.81px;
}

以这种方式呈现屏幕：

我不确定这个max-height: 60px样式的来源，或者如何覆盖它。由于div似乎是聚合物生成的对象，我假设这是由Polymer在某个时刻生成的。但它并没有随着对话的其余部分而增长。

此元素是否有一些设置或方法可确保内部＆＃34;可滚动＆＃34; div会随着容器（paper-dialog-scrollable）

而增长

（理想情况下，我希望对话框只根据内容的大小增长，最大高度为100％。但这超出了本问题的范围。）

更新

最大高度不一定是60px。现在，它从383px开始（远低于paper-dialog-scrollable元素的高度）。＆＃34;可滚动＆＃34;的高度当我展开和缩小窗口时，div会发生变化，但它似乎总是应该是它的一定百分比。

以下是我如何使用HTML正文中的元素的代码示例：

<body unresolved>
<template is="dom-bind">

<div class="centerPanel">
...
    <paper-button class="jobButton" onclick="openTheDialog('#BADialog')" style="margin-top:50px;">Business Analyst</paper-button>
...
</div>

<paper-dialog id="BADialog" modal>
    <h2>Business Analyst</h2>
    <paper-dialog-scrollable>
        <div class="content" id="BAContent">
            ...
        </div>
    </paper-dialog-scrollable>
    <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm autofocus>Apply for a Business Analyst position</paper-button>
    </div>
</paper-dialog>

</template>

<script>
function openTheDialog(selector) {
    document.querySelector(selector).open();
}
...
</script>


</body>

Answer 1

感谢@ tony19的帮助。我在我的环境中尝试了他的工作示例，并且它们与Codepen上的行为不同。

这使我得出结论，正确地说，是我的环境有问题。我将本地Polymer组件升级到最新版本，现在一切正常。

调整聚合物对话和聚合物对话可滚动的大小：可变高度

1 个答案: