1

Any way i can have ckeditor consume 100% height dynamically?

http://jsfiddle.net/bobbyrne01/jejmqjxa/1/

html

<div id="outer">
    <textarea class="ckeditor" id="editor1" name="editor1"></textarea>
</div>
<button>test</buton>

css

#outer {
    width: 95%;
    height:500px;
}

enter image description here

bobbyrne01
  • 6,295
  • 19
  • 80
  • 150

1 Answers1

0

While checking the ckeditor docs it is not supported yet to set the height in % http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-height So to get the desired result I suggest to set the height to 100% by CSS but not by the ckedtior.config read the screen height with javascript, set the size on load and window resize and put it as value in the outer element height.

Might sounds like a lot of work but is not as tricky. Updated fiddle here

CSS to add (to get all ckeditors you might have on the loaded page)

div[id^=cke_editor] {
    height:100%;
}

Javascript to set the height of the outer div on page load

document
    .getElementById("outer")
    .style.height = window.innerHeight+"px";

If you want to have this working on window resize I suggest to use jQuery but however you can do it without. Here is how (with and without jQuery): Cross-browser window resize event - JavaScript / jQuery

Community
  • 1
  • 1
caramba
  • 21,963
  • 19
  • 86
  • 127
  • visually this works as desired, but when i type text into `ckeditor` the size of the editor is still less then half screen height i.e scroll-bars appear aftr pressing `enter` ~5 times – bobbyrne01 Dec 21 '14 at 16:04
  • @bobbyrne01 damm verry true, did you try this: http://stackoverflow.com/questions/1546408/ckeditor-3-0-height – caramba Dec 21 '14 at 16:27