I'm currently developing a basic Markdown application using Electron. At the moment, all I have is a textarea, a div, and some Javascript code that retrieves the text from the textarea, processes it with Marked (an NPM module), and updates the content of the div using JQuery.
Despite setting overflow: auto; in my CSS file and trying various solutions, I haven't been able to make the div scroll properly. While the textarea scrolls fine, the text in the div gets cut off at the bottom.
If you want to take a look at my code: https://codepen.io/anon/pen/jZprNL
HTML:
<div class="row fullHeight" id="container">
<div class="column fullHeight " id="markdown">
<textarea class="padding markdown-body nodrag" id="editor" placeholder="Write something brilliant..."></textarea>
</div>
<div class="column fullHeight" id="preview">
<div class="padding markdown-body nodrag" id="output">
</div>
</div>
</div>
CSS:
/* Some responsive grid arrangement styles for .row and .column not included here */
#container {
width: 100%;
height: 100%;
overflow: hidden;
padding-bottom: 30px;
}
#editor {
background-color: #f4f6f7;
border-width: 0px;
resize: none;
width: 100%;
height: 100%;
padding: 5px;
padding-top: 15px;
margin-right: 5px;
overflow-y: auto;
overflow-x: hidden;
}
#output {
overflow: scroll;
padding: 5px;
padding-top: 15px;
}
/* Other styles related to electron are mentioned here */
JS:
$editor.on('input propertychange', function () {
var outputHtml = marked($('#editor').val());
$output.html(outputHtml);
console.log($('#editor').val());
});
// Note: This part may not work due to Node installation issues, but it's just a small section of the JS code.
// Added CodePen link for reference