Menu
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.
948
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
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
