开发者

Dynamical size of textarea

I'm using CodeMirror 2 editor. The trouble is that I can't make it fullsize (100%; 100%). I added to the main style:

.CodeMirro开发者_JAVA技巧r {
    height: 100%;
    width: 100%;
}

And this doesn't work for me in any browser. Any ways?


I'm using the following code in http://jsbin.com to stretch the CodeMirror frame (note that JS Bin in particular stretches to half screen width, but the example code below does "fullscreen"):

.CodeMirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

I don't remember whether CodeMirror adds the class by default, but if it doesn't, you'll also want to add it in the JavaScript (assuming you've not solved this already):

CodeMirror.fromTextArea('ID_OF_TEXTAREA', {
  // .. some other options...
  iframeClass: 'CodeMirror'
});


You can't do that with CSS, instead you can use JavaScript:

window.onload = function() {
    var oTextarea = document.getElementById("myText");
    var oParent = oTextarea.parentNode;
    oTextarea.style.width = (oParent.scrollWidth - 30) + "px";
    oTextarea.style.height = (oParent.scrollHeight - 30) + "px";
};

This will set the size of the textarea based on its parent size.
Added some "padding" but you can remove or reduce it.


html, body, .container, .subContainer, .CodeMirror {
    height: 100%;
    width: 100%;
}

Should work as well.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜