个人中心
文章发布
退出
作者热门文章
- 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
当我尝试使用可滚动时，出现错误:$(".scrollable").scrollable 不是一个函数 $(function() { // initialize scrollable w
我发现所有关于滚动对话框的内容都是关于覆盖层的，但它是为了描述对话框的行为，但我需要滚动其中不在 mat-content 中的内容，因为它是一个完整的组件。 打开我正在使用的对话框: const di
我正在使用以下插件: http://flowplayer.org/tools/scrollable.html 在“Scripting API”的子标题下 - 有一个方法如下: getItems() j
有没有办法检测是否滚动 PageView(PageController)或 可滚动 小部件(ScrollController) 由用户手动完成，或在 Controller 对象上使用 jumpTo()
请查看视频/gif: 我的网页浏览量将使当前选项卡处于事件状态。我需要确保事件选项卡始终可见，即使用户多次滑动屏幕也是如此。它是从左到右工作的。但是当我们尝试从右向左返回时，它的行为并不像预期的那样。
我有一个 UITextView，我希望它可以滚动。现在的问题是，键盘出现后，用户只能在屏幕的前半部分输入评论。我想要的是 TextView 可滚动，以便用户可以输入新信息。 这是我正在使用的代码: [
希望这是一个简单的过程! 我从 UserControl 派生，我正在覆盖 OnPaint。我希望此控件可滚动，但我想要的只是能够获取滚动条的值并自行处理在何处绘制所有内容。我已经设置了以下内容: //
我有一个程序可以输出 300-1000 行数据。我希望它有一个类似联机帮助页的界面，而不是一次全部输出，它会显示前 50 行左右的输入，然后用户可以按“f”或“b”来浏览页。有没有办法在 Python
我正在使用 Android 设计支持库中的 TabLayout。我正在使用 Material 设计主题。下面是代码 activity_scrollable_Tab.xml 可
ScrollableControl 类有 2 个 protected bool 属性:HScroll 和 VScroll。 作为document说: Gets or sets a value indi
我们有一个具有 CSS hieght:40px; 的可滚动 div。里面是多个LI height:20px item1 item2 item3 item4 item5 item6 item7
npm react-scrollable-anchor 由于某种原因无法正常工作。我只能在中跳转到id属性标签，不知道为什么。 我尝试过库，包括 react-scrollable-anchor、rea
我正在使用可滚动插件，非常棒的东西，并且按照我想要的方式工作。 我唯一想改变的是: 我有一个滚动的链接图像列表。当我单击图像时，滚动条仍然滚动并且看起来有点奇怪。当用户点击链接时如何停止它？ $("#
有没有办法让我检查控件的滚动条当前是否显示？我想使用它，以便确定如何调整 Scrollable 控件子级的大小，这在某种程度上取决于是否显示 ScrollBar(Scrollable 控件可以动态调整
我的表格布局: 这是手机上的结果: 在平板电脑上: 你可以看到我有 3 个选项卡:at、after 和 recurrence。在手机上，标签宽度不一样，因此它们非常适合 DialogFragment
我在这里展示了我的应用程序的 xml 布局。我想使用 Scrollview 滚动整个页面。但我无法使用。ScrollView 只支持一个直接子级。但我想滚动整个内容。请帮助我解决这个问题？
我有一个可滚动的 JPanel，其中在框布局(垂直轴)中添加了许多编辑器 Pane (具有各自的滚动 Pane )。我的问题是，在单击特定按钮时，我希望特定的编辑器 Pane 获得焦点并在屏幕上可见。
我正在尝试在我的表结构中创建一个 tfoot 元素，我希望它固定在底部，而 tbody 保持可滚动。我已经阅读了各种相关的问题和答案，而且大多数似乎都使用了嵌套表。 虽然有人可能会争辩说“什么都行是你
我正在基于此 tutorial 制作工具提示它使用 jquery .offset() 作为位置。 page with tooltip 当我将工具提示放在可滚动项中时，由于溢出(我认为)，除了第一个可滚
嗨，我对此很陌生，发生了一件奇怪的事情:我已经通过 在我的 magento 页面中实现了 instafeed {{block type="core/template" template="page/i
我是一名优秀的程序员,十分优秀！