Jump to content

Get CKEditor to use full height of container.

Recommended Posts

This is really minor thing but it annoys me that I can't get an instance of a CKEditor to use the full height of a container in the admin.

This is especially noticeable where I have fieldset that's pushing the height of a row down; as per this screenshot:


I've poked around at various CSS settings but no luck so far. Has anyone managed to do this?


Link to comment
Share on other sites

Wasn't there somewhere a module or setting to space out the textarea to the available space?

Can't find anything in the modules directory, or maybe I am using the wrong query, but there has been such a thing.

I know I used it in a project a long time ago, but that project doesn't exist anymore... so I can't look into it.

Link to comment
Share on other sites

18 hours ago, bernhard said:

You can increase the number of "rows" in the field's settings (input tab). Is that what you are looking for?

That's certainly helpful thanks (and honesly will probably do me).

I still feel like it should be possible to automatically resize the editor to the height of the container div though. Probably a bit of javascript that uses the CKEditor resize function  to match the editor height to its parent.

I'll have a play when I have a moment - I was just hoping someone might have done it already....

Link to comment
Share on other sites

If you do some testing note that it's really easy to add custom markup to any inputfield via hook:

$wire->addHookBefore("Inputfield(className=InputfieldCKEditor)::render", function($event) {
  $field = $event->object;
  $id = $field->id;
  $field->appendMarkup = "<script>
    \$li = $('#wrap_$id');

Looking forward to your results 🙂 

  • Like 1
Link to comment
Share on other sites

Posted (edited)
3 hours ago, bernhard said:

If you do some testing note that it's really easy to add custom markup to any inputfield via hook:


Before I spotted your reply though I'd hooked into ProcessPageEdit to load an external js file:

function resizeEditor(HookEvent $event){
        $js_path=wire()->config->urls->templates . "resize_editor.js";


wire()->addHookAfter('ProcessPageEdit::execute', null, 'resizeEditor');

and then that JS looks like this:

// resize ckeditors to height of container.

if(typeof CKEDITOR !== 'undefined'){

	CKEDITOR.on('instanceReady', function(event){

		var input_name=event.editor.name; // this is the id of our field.

		var parent_height = document.getElementById(input_name).parentElement.offsetHeight;
		console.log('Setting editor ' + event.editor.name + ' height to' + parent_height);
		event.editor.resize( '100%', parent_height );


That sets all the editors to the height of their containers.

Edited by millipedia
Edit: Added conditonal to code in case we don't have any CKEditors in the template.
  • Like 2
Link to comment
Share on other sites


juste in case it would help, i nearly always add this maximize ability to ckeditor fields

it adds a button to the field toolbar that allows you to write with a full screen field (very useful with heavy content pages...)
you just have to go back to normal size to save but honestly, not really a problem
have a nice day

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...