How do I enlarge the area in which someone can type in the input field?
1
Simple question really. If I use height: 100px the cursor is still starting in the middle of the input box. I'd like to use the entire box with the cursor starting at the top left to make a more intuitive paragraph writing experience.
I'm simply making a form. When I add width: ***px; you can type to the edge of the extended input box however the same doesn't happen for height: ***px;.
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>html css
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
add a comment |
1
Simple question really. If I use height: 100px the cursor is still starting in the middle of the input box. I'd like to use the entire box with the cursor starting at the top left to make a more intuitive paragraph writing experience.
I'm simply making a form. When I add width: ***px; you can type to the edge of the extended input box however the same doesn't happen for height: ***px;.
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>html css
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
2
Is there a reason you're using<input type="text">instead of<textarea>?
– hungerstar
Dec 28 '18 at 17:43
1
Can I ask you why aren't you using a<textarea>instead of a simple<input>?
– Gerard Reches
Dec 28 '18 at 17:43
Because I'm new and still learning. ANY advice or teachings are welcome!
– Maximilian
Dec 28 '18 at 17:44
@Maximilian Then you should take a look at the textarea HTML tag =)
– Gerard Reches
Dec 28 '18 at 17:45
add a comment |
1
1
1
Simple question really. If I use height: 100px the cursor is still starting in the middle of the input box. I'd like to use the entire box with the cursor starting at the top left to make a more intuitive paragraph writing experience.
I'm simply making a form. When I add width: ***px; you can type to the edge of the extended input box however the same doesn't happen for height: ***px;.
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>html css
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
Simple question really. If I use height: 100px the cursor is still starting in the middle of the input box. I'd like to use the entire box with the cursor starting at the top left to make a more intuitive paragraph writing experience.
I'm simply making a form. When I add width: ***px; you can type to the edge of the extended input box however the same doesn't happen for height: ***px;.
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>html css
html css
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
edited Dec 28 '18 at 17:42
hungerstar
15.9k42747
15.9k42747
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
asked Dec 28 '18 at 17:38
MaximilianMaximilian
486
486
2
Is there a reason you're using<input type="text">instead of<textarea>?
– hungerstar
Dec 28 '18 at 17:43
1
Can I ask you why aren't you using a<textarea>instead of a simple<input>?
– Gerard Reches
Dec 28 '18 at 17:43
Because I'm new and still learning. ANY advice or teachings are welcome!
– Maximilian
Dec 28 '18 at 17:44
@Maximilian Then you should take a look at the textarea HTML tag =)
– Gerard Reches
Dec 28 '18 at 17:45
add a comment |
2
Is there a reason you're using<input type="text">instead of<textarea>?
– hungerstar
Dec 28 '18 at 17:43
1
Can I ask you why aren't you using a<textarea>instead of a simple<input>?
– Gerard Reches
Dec 28 '18 at 17:43
Because I'm new and still learning. ANY advice or teachings are welcome!
– Maximilian
Dec 28 '18 at 17:44
@Maximilian Then you should take a look at the textarea HTML tag =)
– Gerard Reches
Dec 28 '18 at 17:45
2
2
Is there a reason you're using
<input type="text"> instead of <textarea>?– hungerstar
Dec 28 '18 at 17:43
Is there a reason you're using
<input type="text"> instead of <textarea>?– hungerstar
Dec 28 '18 at 17:43
1
1
Can I ask you why aren't you using a
<textarea> instead of a simple <input>?– Gerard Reches
Dec 28 '18 at 17:43
Can I ask you why aren't you using a
<textarea> instead of a simple <input>?– Gerard Reches
Dec 28 '18 at 17:43
Because I'm new and still learning. ANY advice or teachings are welcome!
– Maximilian
Dec 28 '18 at 17:44
Because I'm new and still learning. ANY advice or teachings are welcome!
– Maximilian
Dec 28 '18 at 17:44
@Maximilian Then you should take a look at the textarea HTML tag =)
– Gerard Reches
Dec 28 '18 at 17:45
@Maximilian Then you should take a look at the textarea HTML tag =)
– Gerard Reches
Dec 28 '18 at 17:45
add a comment |
3 Answers
3
active
oldest
votes
0
You can’t change input control’s height. If you want paragraph writing experience use textarea html tag
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
add a comment |
0
You should use a textarea instead of an input. This is a multi-line plain-text editing control.
Here is your code updated with a textarea:
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
add a comment |
0
If you want multi-line support, like a paragraph, use <textarea> instead of <input type="text">. An <input> will only give you a single line.
You can set a default height of an <textarea> with the rows attribute or set a min-height via CSS.
textarea {
width: 100%;
/* min-height: 150px; */
}<textarea name="comments" rows="8"></textarea>answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53962298%2fhow-do-i-enlarge-the-area-in-which-someone-can-type-in-the-input-field%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can’t change input control’s height. If you want paragraph writing experience use textarea html tag
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
add a comment |
0
You can’t change input control’s height. If you want paragraph writing experience use textarea html tag
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
add a comment |
0
0
0
You can’t change input control’s height. If you want paragraph writing experience use textarea html tag
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
You can’t change input control’s height. If you want paragraph writing experience use textarea html tag
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
answered Dec 28 '18 at 17:43
Hari PrathapHari Prathap
705
705
add a comment |
add a comment |
0
You should use a textarea instead of an input. This is a multi-line plain-text editing control.
Here is your code updated with a textarea:
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
add a comment |
0
You should use a textarea instead of an input. This is a multi-line plain-text editing control.
Here is your code updated with a textarea:
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
add a comment |
0
0
0
You should use a textarea instead of an input. This is a multi-line plain-text editing control.
Here is your code updated with a textarea:
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
You should use a textarea instead of an input. This is a multi-line plain-text editing control.
Here is your code updated with a textarea:
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
textarea {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 500px;
}
.form {
margin: 50px 0 100px 0;
}
.form > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description > input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<textarea type="text" id="text-box" class="desc-box" maxlength="200" required>
</textarea>
</div>answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
answered Dec 28 '18 at 17:48
MaartiMaarti
1,7662822
1,7662822
add a comment |
add a comment |
0
If you want multi-line support, like a paragraph, use <textarea> instead of <input type="text">. An <input> will only give you a single line.
You can set a default height of an <textarea> with the rows attribute or set a min-height via CSS.
textarea {
width: 100%;
/* min-height: 150px; */
}<textarea name="comments" rows="8"></textarea>answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
add a comment |
0
If you want multi-line support, like a paragraph, use <textarea> instead of <input type="text">. An <input> will only give you a single line.
You can set a default height of an <textarea> with the rows attribute or set a min-height via CSS.
textarea {
width: 100%;
/* min-height: 150px; */
}<textarea name="comments" rows="8"></textarea>answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
add a comment |
0
0
0
If you want multi-line support, like a paragraph, use <textarea> instead of <input type="text">. An <input> will only give you a single line.
You can set a default height of an <textarea> with the rows attribute or set a min-height via CSS.
textarea {
width: 100%;
/* min-height: 150px; */
}<textarea name="comments" rows="8"></textarea>answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
If you want multi-line support, like a paragraph, use <textarea> instead of <input type="text">. An <input> will only give you a single line.
You can set a default height of an <textarea> with the rows attribute or set a min-height via CSS.
textarea {
width: 100%;
/* min-height: 150px; */
}<textarea name="comments" rows="8"></textarea>textarea {
width: 100%;
/* min-height: 150px; */
}<textarea name="comments" rows="8"></textarea>textarea {
width: 100%;
/* min-height: 150px; */
}<textarea name="comments" rows="8"></textarea>answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
edited Dec 28 '18 at 18:00
answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
answered Dec 28 '18 at 17:46
hungerstarhungerstar
15.9k42747
15.9k42747
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53962298%2fhow-do-i-enlarge-the-area-in-which-someone-can-type-in-the-input-field%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Is there a reason you're using
<input type="text">instead of<textarea>?– hungerstar
Dec 28 '18 at 17:43
1
Can I ask you why aren't you using a
<textarea>instead of a simple<input>?– Gerard Reches
Dec 28 '18 at 17:43
Because I'm new and still learning. ANY advice or teachings are welcome!
– Maximilian
Dec 28 '18 at 17:44
@Maximilian Then you should take a look at the textarea HTML tag =)
– Gerard Reches
Dec 28 '18 at 17:45