Question

我有一个纸质对话框，就像一个表单，用户将填写4个字段，其中一个是纸张文本区域，另外三个是纸张输入。 paper-textarea是表格中的最后一项，字符数为400个字符。当我输入完整的400个字符时，它会流出网站并且不可滚动。我将在下面有这个图片。有没有办法让它不会流出屏幕，或者如果它变大，我可以向上或向下滚动对话框？

以下是对话框代码：

<paper-dialog id="applynow" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
      <paper-dialog-scrollable>
        <img src="/images/logo.png" width="80%" height="auto" style="margin: 0 auto;"/>
        <paper-input id="name" label="Full Name"></paper-input>
        <paper-input id="phone" label="Phone Number"></paper-input>
        <paper-input id="email" label="Email"></paper-input> 
        <paper-textarea id="desc" label="Why Pick You?" char-counter maxlength="400"></paper-textarea>
        <paper-button on-click="submitForm">Submit</paper-button>
      </paper-dialog-scrollable>
      </paper-dialog>

这是css：

paper-dialog {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        width: 375px;
      }

以下是我正在谈论的图片：

如图所示，一旦我在此对话框中键入了全部金额，提交按钮就不在视图中。有没有办法调整这个或使它如此纸张textarea只能变得这么高，或者是一定数量的行？在此先感谢，非常感谢帮助。

Answer 1

当paper-dialog的高度超过其容器时，max-height通常是可滚动的，但如果由于某种原因你不是这样，你可以使用CSS（overlfow: scrollable和max-width）来制作它可滚动。您可能还希望修复对话框的宽度，因此您可以设置paper-dialog { width: 375px; max-width: 375px; max-height: 50%; overflow: scroll; }。当您输入非常长的文本行时，这会阻止对话框在屏幕外生长。

<head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-dialog/paper-dialog.html">
  <link rel="import" href="paper-dialog-scrollable/paper-dialog-scrollable.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-input/paper-textarea.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="neon-animation/neon-animation.html">
</head>
<body>
  <style>
    paper-dialog {
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      width: 375px;
      max-width: 375px;
      max-height: 50%;
      overflow: scroll;
    }
  </style>
  <paper-dialog id="applynow"
                opened
                entry-animation="scale-up-animation"
                exit-animation="fade-out-animation">
    <paper-dialog-scrollable>
      <img src="http://placehold.it/350x150" width="80%" height="auto" style="margin: 0 auto;"/>
      <paper-input id="name" label="Full Name"></paper-input>
      <paper-input id="phone" label="Phone Number"></paper-input>
      <paper-input id="email" label="Email"></paper-input>
      <paper-textarea id="desc" label="Why Pick You?" char-counter maxlength="400"></paper-textarea>
      <paper-button on-click="submitForm">Submit</paper-button>
    </paper-dialog-scrollable>
  </paper-dialog>
</body>

paper-textarea

codepen

要限制<head> <base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="paper-dialog/paper-dialog.html"> <link rel="import" href="paper-dialog-scrollable/paper-dialog-scrollable.html"> <link rel="import" href="paper-input/paper-input.html"> <link rel="import" href="paper-button/paper-button.html"> <link rel="import" href="paper-input/paper-textarea.html"> <link rel="import" href="neon-animation/neon-animation.html"> </head> <body> <style> paper-dialog { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); width: 375px; max-width: 375px; overflow: scroll; } </style> <paper-dialog id="applynow" opened entry-animation="scale-up-animation" exit-animation="fade-out-animation"> <paper-dialog-scrollable> <img src="http://placehold.it/350x150" width="80%" height="auto" style="margin: 0 auto;"/> <paper-input id="name" label="Full Name"></paper-input> <paper-input id="phone" label="Phone Number"></paper-input> <paper-input id="email" label="Email"></paper-input>  <paper-textarea id="desc" label="Why Pick You?" char-counter maxlength="400" max-rows="4"></paper-textarea> <paper-button on-click="submitForm">Submit</paper-button> </paper-dialog-scrollable> </paper-dialog> </body>引起的对话框高度增长，您还可以设置<paper-textarea>.maxRows以使textarea在超过行数时滚动。

.any

codepen

纸屏幕对话拉伸屏幕

1 个答案: