Skip to content

Commit e67ee32

Browse files
author
Evyatar
committed
README.md added with all current options covered
1 parent 1173ef3 commit e67ee32

File tree

1 file changed

+60
-1
lines changed

1 file changed

+60
-1
lines changed

README.md

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,61 @@
11
# Angular-Autogrow
2-
Angular directive for auto-grow / auto-resize of textarea elements.
2+
Angular directive for auto-grow / auto-resize of textarea elements on typing.
3+
4+
* Works in all cases: expands on line breaks and word breaks.
5+
* Great Performance: minimal DOM manipulation and no watchers.
6+
* Allows limitation of auto-growing so a scrollbar will appear after X lines of content.
7+
8+
A full explanation of the code can be found on my [blog post](http://codingaspect.com/blog/textarea-auto-grow-resizing-textarea-to-fit-text-height) along with a jQuery plugin and an Angular directive with this technique.
9+
10+
#### Bower Installation
11+
```bash
12+
bower install angular-autogrow
13+
```
14+
15+
######
16+
17+
## Usage:
18+
19+
Include `angular-autogrow.min.js` file in `<head>` section of the HTML:
20+
21+
```html
22+
<script type="text/javascript" src="angular-autogrow.min.js"></script>
23+
```
24+
25+
Include `angular-autogrow` dependency on your angular module:
26+
```javascript
27+
var app = angular.module("app", ["angular-autogrow"]);
28+
```
29+
30+
It's also recommended to add those two CSS properties to make things stable:
31+
```css
32+
textarea {
33+
resize: none;
34+
box-sizing: content-box;
35+
}
36+
```
37+
38+
HTML code: add the directive to the <textarea> element:
39+
```html
40+
<textarea autogrow></textarea>
41+
```
42+
43+
######
44+
45+
46+
## More Options:
47+
48+
### Limit Autogrow Lines
49+
50+
You can limit the auto-growing of the textarea element by using `max-lines` attribute:
51+
```html
52+
<textarea autogrow max-lines="3"></textarea>
53+
```
54+
55+
######
56+
### Set Initial Rows
57+
58+
You can set the initial line number using `rows` attribute:
59+
```html
60+
<textarea autogrow rows="1"></textarea>
61+
```

0 commit comments

Comments
 (0)