弹出对话框超出屏幕范围

Question

弹出对话框超出屏幕范围

3

我有一个像表单一样的paper-dialog，用户需要填写4个字段，其中一个是paper-textarea，另外三个是paper-input。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;
      }

这是我所说的图片：

如图所示，在我在此对话框中输入完整金额后，提交按钮不可见。是否有任何方法可以调整此内容或使paper-textarea只能变得如此高，或者设置为一定数量的行？非常感谢您的帮助。

- Nicholas Pesa

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tony19 · Accepted Answer

paper-dialog通常在高度超过其容器时可以滚动，但如果出现问题，您可以使用CSS（max-height和overflow: 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

可以翻译为：

。