{"id":15135898,"url":"https://github.com/jetbrains/angular-elastic","last_synced_at":"2025-09-29T04:32:44.127Z","repository":{"id":65982515,"uuid":"45682816","full_name":"JetBrains/angular-elastic","owner":"JetBrains","description":"Elastic (autosize) textareas for AngularJS, without jQuery dependency.","archived":false,"fork":true,"pushed_at":"2017-08-07T13:46:07.000Z","size":70,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-28T07:02:12.980Z","etag":null,"topics":["angular","jetbrains-ui","textarea"],"latest_commit_sha":null,"homepage":"http://monospaced.github.io/angular-elastic","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"monospaced/angular-elastic","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JetBrains.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-06T13:13:35.000Z","updated_at":"2021-11-21T02:47:08.000Z","dependencies_parsed_at":"2023-02-19T18:31:14.664Z","dependency_job_id":null,"html_url":"https://github.com/JetBrains/angular-elastic","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/JetBrains/angular-elastic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fangular-elastic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fangular-elastic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fangular-elastic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fangular-elastic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JetBrains","download_url":"https://codeload.github.com/JetBrains/angular-elastic/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JetBrains%2Fangular-elastic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277467470,"owners_count":25822915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","jetbrains-ui","textarea"],"created_at":"2024-09-26T06:01:35.821Z","updated_at":"2025-09-29T04:32:43.857Z","avatar_url":"https://github.com/JetBrains.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Angular Elastic\n===============\n\nElastic (autosize) textareas for AngularJS, without jQuery dependency.\n\n[See it in action](http://monospaced.github.io/angular-elastic).\n\nUsage\n-----\n\nas attribute\n\n    \u003ctextarea msd-elastic ng-model=\"foo\"\u003e\n      ...\n    \u003c/textarea\u003e\n\nas class\n\n    \u003ctextarea class=\"msd-elastic\" ng-model=\"bar\"\u003e\n      ...\n    \u003c/textarea\u003e\n\noptionally append whitespace to the end of the height calculation (an extra newline improves the apperance when animating)\n\n    \u003ctextarea msd-elastic=\"\\n\" ng-model=\"foo\"\u003e\n      ...\n    \u003c/textarea\u003e\n\n    \u003ctextarea class=\"msd-elastic: \\n;\" ng-model=\"bar\"\u003e\n      ...\n    \u003c/textarea\u003e\n\nor configure whitespace globally\n\n    app.config(['msdElasticConfig', function(msdElasticConfig) {\n      msdElasticConfig.append = '\\n';\n    }])\n\nthe directive also emits an `elastic:resize` event which you can listen for\n\n    $scope.$on('elastic:resize', function(event, element, oldHeight, newHeight) {\n      // do stuff\n    });\n\nSingle line textareas\n--------------\n\nSet the `rows` attribute to `1`, as browsers default to `2`.\n\n    \u003ctextarea rows=\"1\" msd-elastic ng-model=\"foo\"\u003e\n      ...\n    \u003c/textarea\u003e\n\nInstall\n-------\n\n    bower install angular-elastic\n\n    npm install angular-elastic\n\nInclude the `elastic.js` script provided by this component in your app.\n\nMake sure to add `monospaced.elastic` to your app’s module dependencies.\n\n```\nangular\n  .module('yourApp', [\n    'monospaced.elastic'\n  ]);\n````\n\nSupport\n-------\n\n__Modern browsers__ only—Internet Explorer 6, 7 \u0026 8 retain their default textarea behaviour.\n\nDemo\n----------------\n\n* [monospaced.github.io/angular-elastic](http://monospaced.github.io/angular-elastic)\n* [plunker](http://plnkr.co/edit/9y6YLriAwsK9hqdu72WT?p=preview)\n\n\nHow it works\n------------\n\nBy creating a hidden textarea that mirrors the textarea to which the directive was applied, Angular Elastic can measure the required height and adjust the textarea accordingly. Adjustments are done on:\n\n* Keystroke events\n* Window resize events\n* Model changes\n\nThis works well in most cases with no additional code required other than described in the Usage section above. However, it may occur that the adjustment must be invoked manually at a time that is not covered by the events listed above. E.g. textareas with the style `display: none;` may not have a valid width  in Safari which produces incorrect adjustments. In this case the adjustment needs to be invoked once these textareas become visible. For that Angular Elastic listens to the `elastic:adjust` event on its scope. To invoke the adjustment for all textareas covered by Angular Elastic use:\n\n    $rootScope.$broadcast('elastic:adjust');\n\nInspiration\n----------------\n\n* [jQuery Autosize](http://www.jacklmoore.com/autosize/)\n\n* [jQuery Elastic](http://unwrongest.com/projects/elastic/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetbrains%2Fangular-elastic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjetbrains%2Fangular-elastic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetbrains%2Fangular-elastic/lists"}