search

Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.39k stars 316 forks source link

Textbox longer than browser window #119

Closed Vaelatern closed 5 years ago

Vaelatern commented 5 years ago

Describe the bug The min-height seems to not be used as the initial height at all.

To Reproduce Make a textarea in a form and give it an initial value like 

<textarea name="myname">
This is my initial value.

## Look, it does headers!
</textarea>

Then start easymde with

var easymde = new EasyMDE({element:document.getElementById('post'), minHeight:'50px', promptURLs:true})

Expected behavior The editor space should be about 50px. It ends up being about 100vh, so I can't even get a screenshot of the whole editor window.

Screenshots https://files.catbox.moe/obgfuz.png

Version information

Additional context None comes to mind.

Vaelatern commented 5 years ago

Solved it for me with

.CodeMirror-scroll{height:auto}
jecsham commented 5 years ago

Cant reproduce. Can you try to reproduce it in a new clean environment? In your screenshot the editor looks broken, probabily there is an error with your styles... 🤔

Vaelatern commented 5 years ago

I'll try to work up a minimal example.

Vaelatern commented 5 years ago 
<html>
  <head>
    <meta content="width=device-width" name="viewport" />
    <link href="https://unpkg.com/easymde@2.8.0/dist/easymde.min.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/easymde@2.8.0/dist/easymde.min.js" type="text/javascript">
    </script>
  </head>
  <body>
    <div>
      <main>
        <article>
          <form action="/" method="post">
            <textarea id="post" name="post">Look at me, "I have strings!" I'm also way too long.</textarea>
          </form>
        </article>
      </main>
    </div>
  </body>
  <footer>
    <script type="text/javascript">
      var easymde = new EasyMDE({element:document.getElementById('post'), minHeight:'10%', promptURLs:true})
    </script>
  </footer>
</html>

But I was also able to remove more tags.

<html>
  <head>
    <link href="https://unpkg.com/easymde@2.8.0/dist/easymde.min.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/easymde@2.8.0/dist/easymde.min.js" type="text/javascript"></script>
  </head>
  <body>
    <textarea id="p1" name="p1">Look at me, "I have strings!" I'm also way too long.</textarea>
    <script type="text/javascript">
      var easymde = new EasyMDE({element:document.getElementById('p1'), minHeight:'10%', promptURLs:true})
    </script>
  </body>
</html>

Tested in firefox and chromium on Linux.

jecsham commented 5 years ago

Declare the <!DOCTYPE html> at the start of the file.

Vaelatern commented 5 years ago

Works! Thanks.

xiamuguizhi commented 1 year ago

@Vaelatern I used from to submit theformand encountered the same problem as you

I used the same method as you and successfully solved the problem.

Thanks: .CodeMirror-scroll{height:auto}