Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Textarea scroll bar

Tags:

html

textarea

I want the following textarea to allow scrolling when the stuff inside text.txt fills up more than the textarea window. Also, I want it to auto scroll to the bottom of textarea field. Is this possible?

<textarea class="textarea" id="textarea" readonly="readonly" " rows="20">
      <?php
      //$date=date(dmY);
      $file = fopen("text.txt", "r");

      while(!feof($file)){
         echo fgets($file);
      }
      fclose($file);
    ?>
    </textarea>

Thanks.

like image 250
moesef Avatar asked Feb 06 '12 21:02

moesef


People also ask

How do I make my text area scrollable?

To change the properties of the text box, select the text box and then click Properties. The Properties sheet appears. You will want to change the EnterKeyBehavior, MultiLine and ScrollBars properties. Set the ScrollBar property to Both, Horizontal, Vertical etc according to your own needs.

How are scroll bars specified for a textarea control?

Approach 1: Get the scrollHeight property of the textarea. Use scrollTop property to set the position of vertical scrollbar using jQuery.

How do I add a scrollbar to a text box in HTML?

Approach: To create a responsive scroll box, add a <div> tag and then proceed to create the scroll box. All you need to do is to choose the height and width of the scroll box (make sure that the height of your box is short enough so that you have an overflow of the text, allowing box to scroll down.

How do I hide a textarea scroll?

By default, the <textarea> element comes with a vertical scrollbar. It helps the user to enter and review their text by scrolling up and down. We need to set the CSS overflow property to "hidden" so as to hide the scrollbar.


1 Answers

This is the CSS that will make sure you get a vertical scrollbar when there is too much text in:

overflow: auto;

For scrolling to bottom of textarea, clearly you need JS for that. See this problem.

like image 114
bzx Avatar answered Dec 01 '22 20:12

bzx