avrahamcool/_autoresize.md

## _autoresize.md

      
    Raw
  

              _autoresize.md
            
          
    Textareas don't autoresize

The reason for that is there's a "hiddendiv" created on document.ready() to determine the height of the resized textarea.
That hidden div doesn't exist anymore when the sample app creates real textareas (see here).
After Aurelia takes control, it replaces the content of its container (meaning aurelia-app="main").


The reference to hiddenDiv (a variable) is essentially broken once Aurelia kicks in. I'm not sure if there is any good workaround apart from creating such a div manually and outside of Aurelia scope.


We've added such a div in this catalog app:
<body>
  <div class="hiddendiv"></div>
  <div aurelia-app="main">
  </div>
</body>
Somehow, this doesn't work in the standalone gist.

  
## app.html
<template>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue" md-text-area="true" md-disabled.bind="disabledValue"></md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setDisabled()">Toggle Input Disabling</button>
  </div>
</template>

## app.js
export class App {
  textValue = '';
  disabledValue = false;
  setText() {
    this.textValue = 'something';
  }
  setDisabled() {
    this.disabledValue = !this.disabledValue;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="hiddendiv"></div>
    <div aurelia-app="main">
      <h1>Loading...</h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
      <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.2/config2.js"></script>
      <script>
        System.import('aurelia-bootstrapper');
      </script>
    </div>
  </body>
</html>

## main.js
/*******************************************************************************
 * The following two lines enable async/await without using babel's
 * "runtime" transformer. Uncomment the lines if you intend to use async/await.
 *
 * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
 */
//import regeneratorRuntime from 'babel-runtime/regenerator';
//window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/

import 'materialize';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<div>
	<md-input md-label="put some text here" md-value.bind="textValue" md-text-area="true" md-disabled.bind="disabledValue"></md-input><br />
	You entered: ${textValue}<br />
	<button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
	<button md-button="flat: true;" md-waves class="accent-text" click.delegate="setDisabled()">Toggle Input Disabling</button>
	</div>
	</template>
	export class App {
	textValue = '';
	disabledValue = false;
	setText() {
	this.textValue = 'something';
	}
	setDisabled() {
	this.disabledValue = !this.disabledValue;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<div class="hiddendiv"></div>
	<div aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.2/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</div>
	</body>
	</html>
	/*******************************************************************************
	* The following two lines enable async/await without using babel's
	* "runtime" transformer. Uncomment the lines if you intend to use async/await.
	*
	* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
	*/
	//import regeneratorRuntime from 'babel-runtime/regenerator';
	//window.regeneratorRuntime = regeneratorRuntime;
	/******************************************************************************/

	import 'materialize';

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

	aurelia.start().then(a => a.setRoot());
	}