I'm trying to put CodeMirror and Xterm.js in a GridLayout like the following code. I'm specifying 1fr 200px 80px for grid-template-rows here and I'm having problems with this.
Occurred problems
If the CodeMirror text area contains enough text, the height will increase with the amount of text. I'm hoping for the behavior of displaying scrollbars without sticking out of
1fr.xterm.js sticks out of the container. xterm.js sticks out of the container. I expect xterm.js to fit in the size specified by
grid-template-rows.
How can I solve these problems? Thank you.
const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
lineNumbers: true,
mode: "text/x-csrc",
viewportMargin: Infinity
});
const codemirror = document.getElementById("code-mirror");
editor.setSize("100%", "100%");
const term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
window.addEventListener("resize", function() {
editor.setSize();
}, false);.container {
height: 100vh;
}
.editor {
display: grid;
grid-template-rows: 1fr 200px 80px;
height: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js"></script>
<div class="container">
<div class="editor">
<div id="code-mirror">
<textarea id="editor">
typedef struct {
void* arg_socket;
zmq_msg_t* arg_msg;
char* arg_string;
unsigned long arg_len;
int arg_int, arg_command;
int signal_fd;
int pad;
void* context;
sem_t sem;
} acl_zmq_context;
</textarea>
</div>
<div id="terminal">
</div>
<div class="footer">
<button type="button">
run
</button>
</div>
</div>
</div>