# Ionic Elastichat - Chat Demo w/ Auto Resizing Textarea

**URL:** <https://forum.ionicframework.com/t/ionic-elastichat-chat-demo-w-auto-resizing-textarea/13562>\
**Category:** demo\
**Created:** [December 3, 2014, 8:01pm UTC](https://forum.ionicframework.com/t/ionic-elastichat-chat-demo-w-auto-resizing-textarea/13562 "2014-12-03T20:01:04Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Ross](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ross/32/7233_2.png) [@Ross](https://forum.ionicframework.com/u/Ross)\
**Post date:** [December 3, 2014, 8:01pm UTC](https://forum.ionicframework.com/t/ionic-elastichat-chat-demo-w-auto-resizing-textarea/13562/1 "2014-12-03T20:01:04Z")

</div>

> **[Ionic Elastichat](https://codepen.io/rossmartin/pen/XJmpQr)**
>
> ...

[Codepen direct link](http://codepen.io/rossmartin/pen/XJmpQr)

A couple of weeks ago I came across this awesome [angular-elastic directive](https://github.com/monospaced/angular-elastic). I decided to integrate it into an app I am currently creating (coming out soon!). It works great with Ionic and adds that native feel to messaging similar to iMessage/Tinder. I’ve read that iMessage uses HTML/JS but I’m not sure on this though.

I want to share my experience with using it as there a couple of hacks needed to get it to play nice. I’m going to try and summarize what is needed to get it to work with Ionic below.

**_CSS_**

```
/* allows the bar-footer to be elastic /*
/* optionally set a max-height */
/* maxlength on the textarea will prevent /*
/* it from getting too large also */
.bar-footer {
  overflow: visible !important;
}

.bar-footer textarea {
  resize: none;
  height: 25px;
}

```

**_JavaScript_**

```
// I emit this event from the monospaced.elastic directive, read line 480 in the Codepen JS
$scope.$on('taResize', function(e, ta) {
  console.log('taResize');
  if (!ta) return;

  var taHeight = ta[0].offsetHeight;
  console.log('taHeight: ' + taHeight);

  if (!footerBar) return;

  var newFooterHeight = taHeight + 10;
  newFooterHeight = (newFooterHeight > 44) ? newFooterHeight : 44;

  footerBar.style.height = newFooterHeight + 'px';

  // for iOS you will need to add the keyboardHeight to the scroller.style.bottom
  if (device.platform.toLowerCase() === 'ios') {
    scroller.style.bottom = newFooterHeight + keyboardHeight + 'px'; 
  } else {
    scroller.style.bottom = newFooterHeight + 'px'; 
  }
});

```

You will notice that I grab the footer bar element in the `$ionicView.enter` event.

This codepen has a lot of of extra **_jazz_** in it also. I have integrated `angular moment` for displaying the relative time for messages. There is also `autolinker.js` integrated and I’m sharing a custom directive I made for it to work with Ionic/Cordova (URL links work in the message text and you can see how to open them with the in-app browser plugin in the `autolinker directive` I made). You can hold a message to show an `$ionicActionSheet` to delete the message or copy the text. [CordovaClipboard](https://github.com/VersoSolutions/CordovaClipboard) is a nifty plugin that can copy text to a device’s clipboard.

This is using the Ionic beta 14.

I \<3 Ionic.

Happy hacking ☀

---

_[View the full topic](https://forum.ionicframework.com/t/ionic-elastichat-chat-demo-w-auto-resizing-textarea/13562)._