Hello there, I hope everything is going well for you!
I'm currently working on a project with a basic code editor and trying to find the best way to add some space at the bottom of the textarea. I don't want users to always be typing right at the very bottom when things start to overflow or scroll. It's similar to what CodePen does.
The challenge I'm facing is that I have two divs positioned absolutely side by side - one for line numbers and the other for lines. I've also synchronized their scrolling. Adding extra space on top of that has me stuck!
Here is a mock-up on CodePen that shows my work-in-progress: CodePen: Textarea with Line Numbers
$(document).ready(function() {
$(".bulk-editor .editor").bind("input propertychange", function() {
var lineCount = $(this).val().split("\n").length;
$(".lines").text('');
for (var i = 0; i < lineCount; ++i) {
$(".lines").append("<span class='linenum'></span>");
}
});
$('.editor').scroll(function() {
var top = $(this).scrollTop();
$('.lines').scrollTop(top);
});
});* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
height: 300px;
padding: 16px 0;
}
.bulk-editor {
position: relative;
height: 100%;
width: 100%;
counter-reset: matches;
outline: none;
font-family: monospace;
border: 1px solid #ced4da;
overflow: hidden;
}
.bulk-editor-wrapper {
position: relative;
top: 0;
padding-top: 4px;
height: 100%;
width: 100%;
}
.lines {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
line-height: 1.2;
font-size: 1rem;
user-select: none;
outline: none;
border: none;
z-index: 2;
background: #e4e4e4;
overflow: hidden;
padding-top: inherit;
}
.linenum {
display: block;
width: 40px;
text-align: right;
color: #808080;
line-height: inherit;
font-size: inherit;
&::before {
counter-increment: matches;
content: counter(matches);
}
padding-right: 10px;
}
.editor {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-left: 60px !important;
white-space: pre-wrap;
outline: none;
background-color: white;
border: none;
resize: none;
margin: 0;
color: grey;
line-height: 1.2;
font-size: 1rem;
overflow: auto;
padding-top: inherit;
&:focus {
color: black;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Refer to this article https://www.codeproject.com/Tips/5163219/HTML-Line-Numbering-using-textarea -->
<div class="container">
<div class="bulk-editor">
<div class="bulk-editor-wrapper">
<div class="lines"></div>
<textarea class="editor" rows="10" autocorrect="off" spellcheck="false"></textarea>
</div>
</div>
</div>https://i.sstatic.net/uPwWA.png
https://i.sstatic.net/PuHwP.png
I'm unsure about the correct approach here. Can this be achieved using just CSS, or will a more complex solution involving JavaScript and scroll events be necessary?
If anyone has encountered a similar issue and knows of a good solution, I would greatly appreciate your insights. Thank you so much!