Support » Plugin: Tabify Edit Screen » Layout bug with Tabify Edit screen and WordPress editor: gap after tab switch

  • rembem

    (@rembem)


    In a closed topic somebody else wrote this:

    When switching tabs and then returning to the main editor there is a large gap between the Visual/Text tabs and the edit area. Also, all content in the edit area is missing. This is temporarily corrected when resizing the browser window or scrolling. If I disable “Enable full-height editor and distraction-free functionality” in Screen Options the issue is resolved.

    Anyone else with this same problem? Temporary solution (other than disabling the distraction free feature)?

    I had the same and it is very annoying.
    Hopefully the plugin author will fix this. In the meantime some workarounds:

    The cause is an incompatibility of the Tabify Edit Screen plugin with WordPress functionality in wp-includes/editor-expand.js, which is for the full-screen/full-height/distraction free editor functionality.

    A few ways to solve it:

    1/ Disable ‘distraction-free functionality’ in Screen Options.

    2/ Disable this functionality completely, but you also lose full screen writing mode. Put this in functions.php:

    add_action('admin_enqueue_scripts', 'remove_admin_script_editorexpand', 100);
    function remove_admin_script_editorexpand() {
    	wp_dequeue_script('editor-expand');
    }

    3/ In wp-includes/editor-expand.js is a function called adjust() which is the cause of the gap above the editor. To solve this issue, this adjust() function needs to be triggered on a click of a Tab. You can add some jQuery to the admin area, to trigger this function, which will solve the issue:

    First add a js file to the theme and call it adminscript-tabify.js for example:

    jQuery(function($) {
    
         $( ".tabify-tab" ).on("click", function() {
            $(document).trigger('resize.editor-expand');
        });
    
    });

    Then call the script in functions.php:

    if (is_admin()) {
    wp_register_script( 'adminscript-tabify', get_template_directory_uri() . '/{path-to-script}/admin-tabify.js', array(
            'jquery', 'tabify-edit-screen'), 1.0, true );
     wp_enqueue_script( 'adminscript-tabify' );
    }

    Don’t forget the / before {path-to-script}, and replace {path-to-script} with the path to the script in your theme directory.

  • The topic ‘Layout bug with Tabify Edit screen and WordPress editor: gap after tab switch’ is closed to new replies.