Sync height of Markdown input <textarea> and preview <div>

[dboehmer]

In 64e3c85095640528672f57ce7a7dc69c03faaf47 I revisited the Markdown editor with preview and went from a floating element to CSS flex to … well, flex with my CSS skills :wink:

Both elements are now properly side by side and the following content is below them. This issue is about syncing their height.

• both elements should always have the same height
• if the preview is larger than the <div> make it scroll
• set both to a sensible height at page load
• allow user to resize the textbox – maximum freedom to the user
  • minimal min-height – maybe like 2 lines of text input?
  • if possible, no max-height – this GitHub input for new issues has a maximum height and it’s pretty annoying if you add long texts!
• bonus: sync scrolling: if you edit the lower portion of the input text, the preview scrolls down, too

[MarkusLeupold]

I don't have a running Coocook test server, so I only can suggest a few things here without actually implementing it. Sorry.

Same height

Same height while still being responsible can be achieved using Flex or Grid Layout (at least I think so):

.row {
    display: flex;
    align-items: stretch; /* vertically stretching the flex-items */
}
.row>* { /* maybe use a more specific selector for the flex-items */
    flex-base: 50%;
    flex-shrink: 1;
    flex-grow: 1;
}

/* OR */

.row {
    display: grid;
    grid-template-columns: auto auto;
    align-content: stretch; /* vertically stretching the grid-items */
}

Make the preview scroll

Use overflow-y: scroll; on the preview div. (Requires that the div has a height or max-height that is smaller than what the content needs)

Sensible height

Give the containing .row a maximum height. You can choose a value which lets the row always be a bit less tall than the viewport, so that there is some space left for positioning the mouse to scroll the page and to make it look better:

.row {
    max-height: 75vh;
}

Setting up an initial height is easy when the page is displayed using a chromium browser. Simply set the textarea's height to the preferred initial height. When the textarea gets resized by the user, the user-agent will change the height property of the textarea, overriding your default value in the stylesheet. I don't know, if Gecko and all the other user-agents behave the same.

Let the user resize the textbox

Simply use resize: vertical;, like before. But, I recommend to use it on the row, not the textarea, because it will actually affect the whole row, not only the textarea. The downside would be, that we would be required to make the border of the row visible in some elegant, visually pleasing way, so the eye will be lead to the resizing handle in the corner. It'd be even cooler, if the bottom and/or top border were resizing handles as a whole, but I don't know how to do that. The max-height of the row will prevent the user from making the textbox absurdly large. In my opinion, nobody needs a textbox that is taller than the viewport, because if the content does not fit into the viewport, it needs scrolling anyway. So, why not use the textbox'es scrollbar for that? The min-height could either be applied to the row or the textarea.

[dboehmer]

Relevant on

• [x] project settings: description
• [x] recipe editor, preparation
• [x] dish editor: description, preparation
• [x] faq editor: question, answer
• [x] terms edit: terms

[kuro610]

The scrolling sync works but is not the best because it doesn't detect when the markdown preview or the input needs more or less space for one line

[dboehmer]

Solved with 2fe413e8268f7e64b8b107390ad27300d7de54ab.