纸质对话框拉伸出屏幕

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;
      }

以下是我所说内容的图片：

如图所示，一旦我在此对话框中输入了全部数量，提交按钮就看不到了。有什么方法可以调整它或使纸文本区域只能变得这么高，或者是一定数量的行？提前致谢，非常感谢您的帮助。

Answer 1

当 paper-dialog 的高度超过其容器时，它通常是可滚动的，但如果由于某种原因它不是您的情况，您可以使用 CSS（max-height 和 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>

codepen

要限制由 paper-textarea 引起的对话框高度增长，您还可以设置 <paper-textarea>.maxRows 使文本区域在超过行数时滚动。

<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>
      <!-- set max-rows to set the maximum number of rows before
           the text-area scrolls -->
      <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>

codepen

纸质对话框拉伸出屏幕

paper-dialog stretching off screen

html

css

polymer

paper-elements

polymer-1.0