个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我刚刚开始使用 polymer-dialog 和 polymer-dialog-scrollable 元素。使用标准案例，并按照 Polymer 网站上的示例，元素显示良好。
但是，我遇到了一个问题。我希望在 polymer-dialog-scrollable 中显示的内容在标准尺寸对话框中看起来不太好:
我想增加整个对话框的高度，所以我尝试使用 CSS 对元素进行样式设置:
paper-dialog {
height: 90%;
}
paper-dialog-scrollable {
height: calc(100% - 128px); /* 128 seemed to account for the header and footer */
}
在简单的 HTML 中，这应该可行。但实际上，在 paper-dialog-scrollable 内部实际上有一个生成的 div，其 id 和类 scrollable，我假设 Polymer 是插入。检查这个元素，我看到这个 CSS:
element.style {
box-styling: border-box;
max-height: 60px;
max-width: 1292.81px;
}
以这种方式呈现屏幕:
我不确定这个 max-height: 60px 样式来自哪里，或者如何覆盖它。由于 div 似乎是一个 Polymer 生成的对象，我假设这是由 Polymer 在某个时候生成的。但它并没有随着对话的其余部分而增长。
此元素是否有一些设置或方法可确保内部“可滚动”div 将与其容器一起增长(paper-dialog-scrollable) ?
(理想情况下，我希望对话框仅根据内容的大小增长，最大高度为 100%。但这超出了本问题的范围。)
更新:
最大高度不一定是 60px。现在，它从 383px 开始(远低于 paper-dialog-scrollable 元素的高度)。当我展开和缩小窗口时，“可滚动”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>
最佳答案
感谢@tony19 的帮助。我在我的环境中尝试了他的工作示例，但它们的工作行为与在 Codepen 上不同。
这让我得出正确的结论，是我的环境出了问题。我将本地 Polymer 组件升级到最新版本，现在一切正常。
关于javascript - 调整 polymer-dialog 和 polymer-dialog-scrollable : variable height，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37599199/
26
4
0
使用的浏览器 - Chrome 67.0.3396.99 我创建了一个 DialogsModule它有一个组件 ConfirmDialog.component.ts使用以下模板 confirm-dia
我一直在尝试制作一个简单的程序来使用Electron创建和读取文件。 到目前为止，我已经尝试了很多，并且似乎没有提供与dialog.showOpenDialog一起提供的回调函数。 dialo
我有一个登录对话框，想防止它在按下回车键时自动关闭。 更具体地说，当用户输入凭据并按下回车键时，凭据的响应返回错误，我希望对话框保留(这样我就可以向他们显示一些错误消息，让用户再试一次) . 这就是我
Jquery对话框的含义是什么:它是单独的网页还是网页的一部分？ (我不太了解 Jquery)。 谢谢 最佳答案 jQuery 对话框将出现在页面上方，但它实际上是当前页面的一部分。当您加载对话框时，
当用户退出 xe:dialog 时，我需要做一些清理工作。我将代码放在 onUnload 事件中，如下所示: viewScope.remove("vsSomeVariable"); viewScope
我想相对于我的 html 元素之一定位 Dojo 的 Dijit 对话框。是否可以？ 如是。如何？ 目前它总是在视口(viewport)中间显示对话框。 有人可以帮我解决这个问题吗？ 谢谢。 amar
即使属性设置为“openDirectory”，是否也可以在 showOpenDialog 中显示文件？当然，文件不应该是可选的，但可能会显示为灰色。所以用户知道他选择了正确的目录。在 OSX 上一切正
如何使用 android 标准组件 Bottom Sheet 单实现以下设计功能: 出现 Bottom Sheet 对话框片段时的图像: 用户向上滚动以查看内容底部时的图像: 我将使用 ViewPag
我刚开始使用对话框，我非常喜欢在资源文件中定义布局的可能性。但是是否可以设置一个对话框并将其嵌入到另一个对话框中(即没有 float 对话框)？ 对于普通窗口，我创建了一个带有一个子窗口的主窗口。然后
我正在尝试更改 dialog 的背景颜色元素的 backdrop使用自定义 CSS 属性，但不需要。这是 Chrome 中的错误还是有原因？ document.querySelector('dialo
我有一个 Electron 应用程序。如果我通常使用dialog.showmessageBoxSync，则必须等待用户输入。选项为:关闭，取消或确定。 它工作正常，但是如果我在对话框外部(应用程序内的
我有一个启动确认对话框的 View ，但代码不是等待对话框返回结果，而是直接跳转到 promise 的“then”部分。请参阅下面的代码: ConfirmDialog.ts import { inje
我有一个启动确认对话框的 View ，但代码不是等待对话框返回结果，而是直接跳转到 promise 的“then”部分。请参阅下面的代码: ConfirmDialog.ts import { inje
我正在使用 MonoTouch.Dialog 的 OwnerDrawnElement，但它似乎不允许用户在触摸屏幕时“突出显示”单元格。我查看了示例，但它没有显示突出显示。有什么建议么？ 我注意到 T
此选择器在 http://jqueryui.com/demos/dialog/#modal-confirmation 中引用(源代码)。 $( "#dialog:ui-dialog" ).dialog
我有一个奇怪的问题。当 Activity 开始时，我会显示一个对话框，说明某些项目正在加载，如下所示: Dialog dialog; @Override public void onCreate(Bu
jquery-ui 中 .dialog("close") 和 .dialog("destroy") 有什么区别？ 我有一个脚本，以前的开发人员使用了 .dialog("destroy") 但现在我必须
我正在使用 Acengage (Ad4Push)，我想自定义它的对话框。 Acengage 团队说可以使用自定义主题更改对话框样式，我做到了。我可以更改 textSize、textColor、wind
我有一个标准 View ，顶部有一个导航栏。我还在它自己的源文件中设置了一个 Monotouch.Dialog。我四处寻找解决方案，但似乎找不到关于如何将 MTD 添加到普通 View 的明确答案。
我试图从一个打开的 md-dialog 中打开一个 md-dialog，但问题是第一个 md-dialog 在第二个打开时关闭了 // the controller of the first popU
我是一名优秀的程序员,十分优秀！