Question

我使用聚合物的纸卡（由于this问题，我无法使用纸张对话框）。如何使其可滚动？

例如，在此代码中，我希望能够在屏幕太大时滚动卡片。现在它只是让一些内容无法访问。

<paper-card>
    <h2>[[someMessage]]</h2>
    <div id="someReallyLongStuff"></div>
    <paper-button raised on-click="doSomethingAndCloseCard">OK got it:)</paper-button>
</paper-card>

我尝试用最大高度限制纸卡的尺寸，但这并没有帮助。

修改

以下是另一个澄清我问题的示例照片：在第一张照片中，我有一张适合屏幕的小纸卡，但是当它变大时，它不会变得可滚动，但是会超出页面边界以使某些内容无法访问

window with small paper-card

window with longer paper-card that is too big for the page

我只为纸卡寻找paper-dialog-scrollable之类的内容

Answer 1

!!!更新底部的代码示例!!!

的纸对话框
但是，我曾经解决过与纸张对话相关的背景问题，我在某处找到了这个答案。我在Polymer 1项目中使用了这个，所以我不确定它是否仍然可以在版本2中运行。你肯定要调整它的功能。

<paper-dialog with-Backdrop on-iron-overlay-opened="patchOverlay"></paper-dialog> // Fix with-backdrop for paper-doalog (Polymer1) // https://github.com/PolymerElements/paper-dialog/issues/7 patchOverlay: function (e) { if (e.target.withBackdrop) { e.target.parentNode.insertBefore(e.target.backdropElement, e.target); } }

的纸卡
如果您仍然希望使用纸卡元素，并发现自己无法进一步更改宽度。

我从未测试过该代码，但假设您必须使用Polymer mixin作为纸卡。
我不认为max-length是有效的CSS更好的是使用max-width或最大高度。

paper-card { --paper-card: { max-width: 500px; }; }

的更新
我使用Polymer here提供的基本纸卡添加了一个代码示例长话短说，我给文本容器一个固定的高度并添加了自动溢出。这样，只要文本不适合它的容器，就会添加滚动条。这可以通过使用“overflow-y：auto;”
仅将溢出添加到y轴来改进

// Load webcomponents.js polyfill if browser doesn't support native Web Components. var webComponentsSupported = ( 'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template') ); if (webComponentsSupported) { // For native Imports, manually fire WebComponentsReady so user code // can use the same code path for native and polyfill'd imports. if (!window.HTMLImports) { document.dispatchEvent( new CustomEvent('WebComponentsReady', {bubbles: true}) ); } } else { // Load webcomponents.js polyfill var script = document.createElement('script'); script.async = true; script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js'; document.head.appendChild(script); }

paper-card { --paper-card: { width: 100px; box-sizing: border-box; }; } .card-content { width: 200px; height: 100px; overflow: auto; }

  <base href="https://rawcdn.githack.com/StartPolymer/cdn/v1.11.0/components/"> <link rel="import" href="iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="paper-card/paper-card.html"> <style is="custom-style"> </style> <paper-card heading="Emmental" image="http://placehold.it/200x100/FFC107/000000" alt="Emmental"> <div class="card-content"> Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese. </div> <div class="card-actions"> <paper-button>Share</paper-button> <paper-button>Explore!</paper-button> </div> </paper-card> <script> window.addEventListener('WebComponentsReady', function() { }); </script>

如何使纸卡可滚动

1 个答案: