html css polymer polymer-1.0 paper-elements

paper-dialog stretching off screen

I have a paper-dialog that is like a form, where a user will fill out 4 fields, one of which is a paper-textarea and the other three are paper-input. The paper-textarea is the last item on the form and has a character count of 400 chars. When i type the full 400 characters it bleeds out of the site and is not scrollable. I will have pictures of this below. Is there any way to make this not bleed out of the screen, or if it gets to big i can scroll the dialog up or down?

Here is the dialog code:

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

Here is the css for it:

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

Here are images of what im talking about:

As shown in the pictures, the submit button is not in view once i type the full amount I can in this dialog. Is there any way to adjust this or make it so the paper-textarea can only get so tall, or be a set amount of rows? Thanks in advance, the help is much appreciated.

Solution

The paper-dialog is normally scrollable when its height exceeds its container, but if for some reason it's not the case for you, you could use CSS (max-height and overlfow: scrollable) to make it scrollable. You probably also want the dialog's width to be fixed, so you would set max-width. This would prevent the dialog from growing offscreen when you enter a really long line of text.

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

To limit the dialog's height growth caused by the paper-textarea, you could also set <paper-textarea>.maxRows to cause the textarea to scroll when it exceeds a line count.

<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