third-party/codemirror-3.15/demo/resize.html

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