Support

Account

Register Login

Home › Forums › General Issues › How to set a custom height for WYSIWYG?

Solving

How to set a custom height for WYSIWYG?

  • I can’t seem to get this to work 🙁

    I’ve tried:

    .acf_wysiwyg {
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
}

#acf-field_name .acf_wysiwyg iframe {
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
}

    Nothing changes the default size of the WYSIWYG Editor with the Basic Toolbar. I want this to apply to all the ACF WYSIWYG Editors, but figured I’d try with the actual field name too, is that what you’re supposed to use for your_acf_key?

  • Hi @Nitruc

    Using firebug I can see that the CSS rule needed to modify the height is:

    
.acf_wysiwyg iframe {

}

    Please note that there is a min-height rule which will need to be set to 0 to allow for your height attribute to work.

    Please use firebug / inspector as you can modify the CSS on the fly and test as you go!

    Hope that helps.

    Thanks
    E

  • Hey @elliot,

    I actually have tried using .acf_wysiwyg iframe too, that was my mistake that I didn’t mention it above. But what exactly would I use if I wanted to set the height to 15px? I tried:

    .acf_wysiwyg iframe {
	min-height:0;
	height:15px;
}

    But it seems like WordPress won’t allow the WYSIWYG field area to be anywhere near that short. It won’t even let me click and drag the bottom right corner to make it shorter than what looks like around a height of 100px. I ended up hacking it a bit more using this to get what I wanted:

    .acf_wysiwyg iframe {
    height: 15px;
    min-height: 15px;
    overflow: hidden;
}

.acf_wysiwyg .wp-editor-container {
height:70px;
overflow: hidden;
}

    Let me know if there’s a better way of doing this. Also, where exactly should I be editing this code? Right now I’m just using a custom function in my functions.php file that adds the custom css to the admin’s head.

  • Hi @Nitruc

    I would suggest that you use firebug / inspector to actually debug the CSS. Perhaps your style rules are being overridden by ACF or WP?

    You can test this using firebug / inspector

    Thanks
    E

  • just to complete the thread. thats easy:

    add_action('admin_head', 'admin_styles');
function admin_styles() {
    if( get_post_type() == "product" ) {
	?>
	<style>
		.acf-editor-wrap iframe {
			height: 100px !important;
			min-height: 100px;
		}
	</style>
	<?php
	}
}

  • @elliot Is there a possibility to add this as a setting soon as i often find I’m having to add css to do this change manually. More than anything it does’t seem a very suitable solution as due to the complex rendering of the wysiwyg element in most browsers the resizing of the iframe via code such as that shown above only comes into effect a second or so after the page has visibly rendered, resulting in a noticeable change and moving of all content below the field.

  • I figured out a better method which allows the field to be enlarged so it’s not a static height. This just removes the inline styling so I can set a height via CSS without the need for !important. Hope this helps someone else!

    
// Remove ACF inline styles for WYSIWYG
function my_acf_input_admin_footer() { ?>
	<script type="text/javascript">
		(function($) {
			acf.add_action('wysiwyg_tinymce_init', function( ed, id, mceInit, $field ){
				$(".acf-field .acf-editor-wrap iframe").removeAttr("style");
			});
		})(jQuery);	
	</script>
<?php }
add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

  • Reviving this thread in case this helps – was looking for the same thing, a way to reduce the initial height of WYSIWYG fields, as it makes the admin overly bulky for small content fields that need more control than Text Area.

    In digging, I found that wp-editor supports editor_height since v3.5 https://codex.wordpress.org/Function_Reference/wp_editor

    Would that allow for ACF to add height as an admin option?

    In the meantime, I’m using the following, but it prevents the client from being able to drag the size larger.

    /*-----------------------------------------------------------------------------------*/
/*	Force Height of ACF WYSIWYG Fields
/*-----------------------------------------------------------------------------------*/
add_action('admin_head', 'my_custom_wysiwyg');
function my_custom_wysiwyg() {
  echo '<style>
    .wp-editor-container textarea.wp-editor-area {
      height: 100px !important;
    } 
  </style>';
}

    Thanks for the help,
    Jonathon

  • Reviving this thread yet again. What demo38 suggests in the post above would be the ideal solution, ACF having a height field for WYSIWYG fields.

    Thanks Elliot!

  • Please add a setting for height control Elliot!

  • +1 to infinity and beyond – we have so many fields that need the WYSIWYG field not for sheer quantity of text but for the style options the editor provides.

    An older javascript hack floating around doesn’t seem to cope with flexible content fields either…

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

The topic ‘How to set a custom height for WYSIWYG?’ is closed to new replies.