search

sparksuite / simplemde-markdown-editor

A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://simplemde.com
MIT License
9.87k stars 1.13k forks source link

Auto adjust preview height #483

Open NickSeagull opened 7 years ago

NickSeagull commented 7 years ago

When I make SimpleMDE to auto-adjust its height by adjusting it in the CodeMirror CSS classes, it works as expected:

.CodeMirror, .CodeMirror-scroll {
    height: auto;
    min-height: 70px;
}

S1

The problem comes when I call togglePreview() on it, it makes the editor-preview div render a scrollbar, as it doesn't adjust the height accordingly.

S2

Is this the correct behavior? If not how could I make the preview adjust itself too?

WesCossick commented 7 years ago

Generally speaking, this is what it's currently designed to do. CodeMirror handles the auto-growing of the editor, but since the preview won't always be the exact same height as the editor, it may result in overflow.

It may be possible to design a solution that changes the height of the preview box so that it does not require scrolling either. I'll mark this as an idea.

markentingh commented 6 years ago

I'd consider this a bug... the preview font styling will most likely be different than the markdown font styling in every use-case, so the preview pane height should auto-resize just like the editor does, since the preview font styling will most likely be larger than the markdown font styling. If instead, you allow the preview pane to load a scrollbar, then you run the risk of displaying two scroll bars on the page, one for the preview pane, and one for the document body.

mdeanda commented 6 years ago

please update the main project page that doesn't include height: auto;. i had to dig around and find this ticket before creating a but report -- i had used height:inherit for the same results.

Avcajaraville commented 6 years ago

Any updates on this issue ? I do think we can include a "load" mechanism, where we can choose if we want to load the preview first.

markentingh commented 6 years ago

I believe the correct behavior should be to auto-grow the preview when it is rendered. If the editor auto-grows, so should the preview mode. The problem here is that preview mode may be using a different set of fonts, different set of font sizes, therefore, that scrollbar most likely will appear in preview mode in most examples, and that is, in my opinion, bad practice.