axelson/resize.html

## resize.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CodeMirror: Autoresize Demo</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script>
        <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css" />

        <!-- Firepad -->
        <link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.1.1/firepad.css" />
        <script src="https://cdn.firebase.com/libs/firepad/1.1.1/firepad.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


    <style type="text/css">
      .firepad {
        height: 300px;
      }
      .CodeMirror {
        border: 1px solid #eee;
        height: auto;
      }
      .CodeMirror-scroll {
        overflow-y: hidden;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h1>CodeMirror: Autoresize demo</h1>

    Firebad: bad
    <div id="firepad"></div>
    <br>
    <br>
    <br>
    <br>
    Original: good
    <form><textarea id="code" name="code">
        ....
.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}
</textarea></form>

<p>By setting a few CSS properties, and giving
the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a>
a value of <code>Infinity</code>, CodeMirror can be made to
automatically resize to fit its content.</p>

    <script>
$(document).ready(function() {
      // Original editor from code mirror
      var codeMirror = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        viewportMargin: Infinity
      });

      var baseUrl = "https://demo.firebaseio.com/firepads/";

      var firepadRef = new Firebase(baseUrl + this.identifier);

      var codeMirror = CodeMirror(document.getElementById("firepad"), {
        lineNumbers: true,
        viewportMargin: Infinity
      });

    var firepad = Firepad.fromCodeMirror(
      firepadRef,
      codeMirror,
      { richTextShortcuts: true, richTextToolbar: false, defaultText: 'Hello, World!' }
    );

    firepad.on('ready', function() {
      console.log("firepad ready");
    });
});
    </script>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>CodeMirror: Autoresize Demo</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script>
	<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css" />

	<!-- Firepad -->
	<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.1.1/firepad.css" />
	<script src="https://cdn.firebase.com/libs/firepad/1.1.1/firepad.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


	<style type="text/css">
	.firepad {
	height: 300px;
	}
	.CodeMirror {
	border: 1px solid #eee;
	height: auto;
	}
	.CodeMirror-scroll {
	overflow-y: hidden;
	overflow-x: auto;
	}
	</style>
	</head>
	<body>
	<h1>CodeMirror: Autoresize demo</h1>

	Firebad: bad
	<div id="firepad"></div>
	<br>
	<br>
	<br>
	<br>
	Original: good
	<form><textarea id="code" name="code">
	....
	.CodeMirror {
	border: 1px solid #eee;
	height: auto;
	}
	.CodeMirror-scroll {
	overflow-y: hidden;
	overflow-x: auto;
	}
	</textarea></form>

	<p>By setting a few CSS properties, and giving
	the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a>
	a value of <code>Infinity</code>, CodeMirror can be made to
	automatically resize to fit its content.</p>

	<script>
	$(document).ready(function() {
	// Original editor from code mirror
	var codeMirror = CodeMirror.fromTextArea(document.getElementById("code"), {
	lineNumbers: true,
	viewportMargin: Infinity
	});

	var baseUrl = "https://demo.firebaseio.com/firepads/";

	var firepadRef = new Firebase(baseUrl + this.identifier);

	var codeMirror = CodeMirror(document.getElementById("firepad"), {
	lineNumbers: true,
	viewportMargin: Infinity
	});

	var firepad = Firepad.fromCodeMirror(
	firepadRef,
	codeMirror,
	{ richTextShortcuts: true, richTextToolbar: false, defaultText: 'Hello, World!' }
	);

	firepad.on('ready', function() {
	console.log("firepad ready");
	});
	});
	</script>

	</body>
	</html>