resize.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!doctype html>
  2. <title>CodeMirror: Autoresize Demo</title>
  3. <meta charset="utf-8"/>
  4. <link rel=stylesheet href="../doc/docs.css">
  5. <link rel="stylesheet" href="../lib/codemirror.css">
  6. <script src="../lib/codemirror.js"></script>
  7. <script src="../mode/css/css.js"></script>
  8. <style type="text/css">
  9. .CodeMirror {
  10. border: 1px solid #eee;
  11. height: auto;
  12. }
  13. .CodeMirror-scroll {
  14. overflow-y: hidden;
  15. overflow-x: auto;
  16. }
  17. </style>
  18. <div id=nav>
  19. <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
  20. <ul>
  21. <li><a href="../index.html">Home</a>
  22. <li><a href="../doc/manual.html">Manual</a>
  23. <li><a href="https://github.com/marijnh/codemirror">Code</a>
  24. </ul>
  25. <ul>
  26. <li><a class=active href="#">Autoresize</a>
  27. </ul>
  28. </div>
  29. <article>
  30. <h2>Autoresize Demo</h2>
  31. <form><textarea id="code" name="code">
  32. .CodeMirror {
  33. border: 1px solid #eee;
  34. height: auto;
  35. }
  36. .CodeMirror-scroll {
  37. overflow-y: hidden;
  38. overflow-x: auto;
  39. }
  40. </textarea></form>
  41. <p>By setting a few CSS properties, and giving
  42. the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a>
  43. a value of <code>Infinity</code>, CodeMirror can be made to
  44. automatically resize to fit its content.</p>
  45. <script>
  46. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  47. lineNumbers: true,
  48. viewportMargin: Infinity
  49. });
  50. </script>
  51. </article>