12

Currently, the site has the following css class that is intended to be used for note (longer texts) entries in a form.

.scrollabletextbox {
    height:100px;
    width:200px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 82%;
    overflow:scroll;
}

The size of the box and other styling register correctly, but the text start vertically centered and never line breaks. The only way to view the text completely is to move the cursor left/right.

The form uses the following html (with a little php) to implement the large text box

<input type="text" class="scrollabletextbox" name="note" value="<?php echo $note; ?>">

Thank you in advance for any help.

1
  • 3
    use textarea instead of input type="text"
    – Wilq
    Aug 13, 2013 at 23:55

2 Answers 2

13

Try replacing input type="text" with textarea tag.

Change your code to:

<textarea class="scrollabletextbox" name="note">
  <?php echo $note; ?>
</textarea>

It sends data just as a normal input tag, so you can get data from it with the same methods.

Read more info about textarea tag

2
  • Thank you. I tried changing it to type-"textarea", but didn't realize textarea is a tag. That worked, but I still need to test how that affects changes to the form.
    – aray12
    Aug 14, 2013 at 18:16
  • @user1775222 happy to help, if you mean by how that affect changes to how textarea sends data, it works just as regular input so you can get it's value by GET/POST with tag name.
    – Wilq
    Aug 15, 2013 at 3:24
7

I would switch the control from an input to a textarea, which will perform the functionality you request by default.

<textarea class="scrollabletextbox" name="note"><?php echo $note; ?></textarea>

JSFIDDLE: http://jsfiddle.net/rJy94/

Not the answer you're looking for? Browse other questions tagged or ask your own question.