Home Forums Feature Requests Set WYSIWYG Height


Set WYSIWYG Height

    • Cjameek

    • August 14, 2016 at 2:31 am

    Lately I’ve been working on websites that require me to use WYSIWYG fields rather than text or textarea fields, and one thing that is a bit annoying about the WYSIWYG field is the inability to change the height. You can do this with the textarea field, and technically you can change the WYSIWYG height through css, but I wish there was an easy way to do that through the field options. Would help make the backend a little more compact for my clients.

    • James

    • August 14, 2016 at 3:39 pm

    Hi @cjameek

    I’m afraid the only way to do it is by using CSS code. If you want it to be an option on the backend, please open a new ticket so your request can be passed directly to the plugin author. You can open a new ticket here:

    Thanks πŸ™‚

  • Height of wysiwg is hardcoded in wysiwyg.php

      256  		// get height
      257: 		$height = acf_get_user_setting('wysiwyg_height', 300);
      258: 		$height = max( $height, 300 ); // minimum height is 300

    You can’t easily change that with css because it produces inline css , viz –

    <textarea id="acf-editor-gtg6gtg6gtg62" class="wp-editor-area" name="acf[field_gtg6gtg6gtg62]" style="height:300px;">wysiwyg content here</textarea>

    Good thing is that wysiwyg.php looks like its primed to go for adding wysiwyg height via admin interface.

    • James

    • September 5, 2016 at 12:46 pm

    Hi @silverdarling

    You should be able to do it like this:

    add_action('acf/input/admin_head', 'my_acf_modify_wysiwyg_height');
    function my_acf_modify_wysiwyg_height() {
        <style type="text/css">
            .acf-field-1234567890abc iframe{
                height: 600px !important;

    Where acf-field-1234567890abc is the element ID of your WYSIWYG field.

    Thanks πŸ™‚

    • yeetien

    • June 17, 2017 at 12:49 pm

    Hi @acf-support

    Using CSS would prevent user from adjusting (dragging using mouse) the height.

    Possible to create a filter for this?


  • Ditto what @yeetien said — would be nice to be able to resize while retaining ability for user to drag to adjust.

  • No solution from me… but wanted to weigh in – and say that I also find that I need a WYSIWYG field for a sentence or two / and the size of it makes the admin seem murky.

    +1 for some ‘field grows to fill content’ option

  • + 1 for an implementation of this in the UI.

    Especially for this:
    β€˜field grows to fill content’

    Thanks for the suggestion.

  • This is how Ive handled fitting wysiwyg editors height to its content, with a fallback to a min height.

    		if ( typeof acf !== 'undefined' ) {
    		acf.add_action( 'wysiwyg_tinymce_init', function( ed, id, mceInit, $field ) {
    			// set height of wysiwyg on frontend
    			var minHeight = 200;
    			var mceHeight = $( ed.iframeElement ).contents().find( 'html' ).height() || minHeight;
    			if ( mceHeight < minHeight ) {
    				mceHeight = minHeight;
    			$( ed.iframeElement ).css( 'height', mceHeight );
    		} );
  • @jgregory – that’s sounds great. BUT – where would I put that? I rarely amend the WordPress admin side of things, so what .js file would that go in? Something along these lines?

  • @gregory @sherriff

    thanks for code, and for asking the question . I don’t get where this fits either

  • @sheriffderek @silverdarling : @jgregory ‘s code is added with this technique:

    But I’m still getting a 200px height component, although I set it to 100px πŸ™

  • OK, combining that with

    add_action('admin_head', 'admin_styles');
    function admin_styles() {
    		.acf-editor-wrap iframe {			
    			min-height: 0;

    (in functions.php) solved it. (found it on this thread

    • AdamACF

    • March 27, 2018 at 12:14 pm

    Please please Elliot if you are reading this get gui control over the field added as soon as you can, its really inconsistent to not have it considering that the textarea field supports this.

    • stiand

    • April 5, 2018 at 9:17 pm

    I solved this with acf/render_field_settings/type=wysiwyg and acf/render_field/type=wysiwyg, like this:

    With this I get a number field on each WYSIWYG where I can define the desired height for the Editor.

  • @danielgc, Your simple style solution within the action admin_head, was all I needed. You can take things further by tracking down specific iframes on your posts and pages like so…

    add_action('admin_head', 'admin_styles');
    function admin_styles() {
    		iframe[id^='wysiwyg-acf-field-favicon_'] {

    In my case, I’m targeting only the favicon fields on my WP admin pages, to have a height adjustment.

  • Thx Kensley!

  • If you’re looking to auto-resize your WYSIWYG and textarea fields in ACF, I’ve made a plugin for that:

  • @moritzjacobs
    I installed your plugin and it works perfectly!

  • I had the same problem and applied my own solution:

    new AcfTextarea();
    class AcfTextarea
      public function __construct()
        add_action('acf/render_field_settings',     [$this, 'addSettingsForWysiwyg']);
        add_filter('acf/render_field/type=wysiwyg', [$this, 'preRenderWysiwygField'], 0, 1);
      /* ---
      --- */
      public function addSettingsForWysiwyg($field)
        if ($field['type'] !== 'wysiwyg') return;
        acf_render_field_setting($field, [
          'label' => __('Limit height of TinyMCE?', 'lang'),
          'name'  => 'wpf_tinymce_low',
          'type'  => 'true_false',
          'ui'    => 1,
        ], true);
      public function preRenderWysiwygField($field)
        if (!isset($field['wpf_tinymce_low']) || !$field['wpf_tinymce_low']) return;
        add_filter('acf/render_field/type=wysiwyg', [$this, 'afterRenderWysiwygField'], 20, 1);
      public function afterRenderWysiwygField($field)
        remove_filter('acf/render_field/type=wysiwyg', [$this, 'afterRenderWysiwygField'], 20, 1);
        $output = ob_get_contents();
        $output = str_replace('height:300px;', 'height:100px;', $output);
        echo $output;
  • @moritzjacobs I logged in just to say thank you and I love you πŸ™‚

    edit: left review on as well


    It seems to create intermittent issues. Sometimes my WYSIWYG fields are 4x the viewport height. It’s on a good track, but I would be in favor of something in core.

  • +1 on just settling on a method and adding to to ACF core.

    Just a “number of rows” for the textarea in the wysiwyg settings would be nice – we already have a toggle for media buttons, different toolbars, a “number of rows” would be perfectly natural there.

Viewing 23 posts - 1 through 23 (of 23 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.