HTML Textarea - cursor starting in center of textarea rather than top
Asked Answered
I

4

8

I have an HTML template and CSS that renders a textarea field, however when clicking in the field, the cursor starts from half way down the text area, not from the top left as I would expect.

This does not occur in IE, but does in Chrome and FF. I also get a list of previous values entered listed below, suggesting that the textbox styles are being applied.

Can anyone advise on which CSS properties I should be looking to modify?

Here is the HTML:

<input id="description" class="textarea" type="textarea" name="description" cols="70" rows="50">

Here are the properties being assigned to the text area:

.standardForm .textarea {
    bottom: 0;
    height: 90px;
    left: 0;
    margin-bottom: 0.5em;
    right: 0;
}
custom.css (line 255)
.standardForm .textbox, .standardForm .textarea, .standardForm .submit, .standardForm .select {
    background: none repeat scroll 0 0 White;
    border: 1px dotted #AAAAAA;
}
custom.css (line 251)
.standardForm .textbox, .standardForm .textarea, .standardForm .select {
    font-size: 12px;
    overflow: hidden;
    padding: 7px;
    resize: none;
    width: 90%;
}
custom.css (line 250)
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, button, textarea {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
    vertical-align: baseline;
}
Izaguirre answered 13/8, 2011 at 12:37 Comment(1)
There is no type "textarea" for the input element, but a textarea element.Backfill
M
10

I think using

<textarea id="description" class="textarea" name="description" cols="70" rows="50"></textarea>

should solve your problem.

Marolda answered 13/8, 2011 at 12:40 Comment(0)
P
20

Providing space between the textarea tags usually results in such undesirable white spaces.Try the code with no spaces that would do the trick. <textarea></textarea>

Paraguay answered 28/11, 2012 at 18:24 Comment(0)
M
10

I think using

<textarea id="description" class="textarea" name="description" cols="70" rows="50"></textarea>

should solve your problem.

Marolda answered 13/8, 2011 at 12:40 Comment(0)
V
5

Your syntax is not correct. You may not include a type attribute with a value of textarea, instead as "roy" suggested you have to use <textarea></textarea> tag

Vouge answered 13/8, 2011 at 13:58 Comment(0)
D
0

Thanks for your valuable contributions. The code that gives the required output is indeed writing the textarea without any space between the tags: <textarea></textarea> , as stated by "Roy".

Denticulation answered 18/7, 2023 at 11:51 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.Spense

© 2022 - 2024 — McMap. All rights reserved.