1

I'm working on an extension that, as part of its functionality, adds Thickboxes to many pages in the Wordpress admin. On most pages this works fine -- I use an in_admin_footer action hook to call add_thickbox, and include the HTML/Javascript (via an include statement) that includes the Thickbox.

    add_action( 'in_admin_footer', function(){   
        add_thickbox();    
        include(__DIR__ . '/includes/thickbox-div.php');
    });    

And my Thickbox href string looks like

#TB_inline?height=480&width=480&inlineId=my_div_id

This works great -- most of the time. However, on a few admin pages (dashboard, plugins), the Thickbox will render too large, and with a incomplete "close" button off to the right.

Thixkbox Screenshot showing too large/weird close button behavior

Does anyone know why this happens, and if there's a fix? My first assumption is it's something some core Wordpress code is doing on these pages to customize the Thickbox -- but I haven't started debugging yet so I don't know that for sure.

I can start to think of dozens of ways to work around this myself in code -- but I'm hoping there's some known science out there to fix this.

  • Yes I might have an idea why this happens, could you post your href link with the parameters you use? – bynicolas Aug 8 '16 at 17:20
  • @bynicolas Post updated with href params (#TB_inline?height=480&width=480&inlineId=my_div_id) – Alan Storm Aug 8 '16 at 17:34
  • ok, try to replace the ?height with &height. There is some known bug to Thickbox and using the variation ?height will cause the first param to get ignore. I don't know if this will fix your issue, but this is my guess – bynicolas Aug 8 '16 at 17:40
  • Thank you for your attention @bynicolas, I appreciate the help. However, that suggestion did not help. I still suspect this is Wordpress core doing some extra styling on those pages. – Alan Storm Aug 8 '16 at 19:41
  • ok! it was worth a shot. I know i had some issues with those query string and width/height being ignored. Do you have other plugins running? Did you try to deactivate everything and check? Here's the track ticket talking about the Thickbox issue, maybe if you go through that discussion you'll find something for your bug. core.trac.wordpress.org/ticket/27473 Good luck! – bynicolas Aug 8 '16 at 19:51
1

After digging into this for a bit, it looks like there's a number of pages where Wordpress ends up changing the behavior of the default thickbox implementation -- this includes both javascript changes, as well as custom style rules. You can see an example of this here

#File: wp-admin/js/media-upload.js
// thickbox settings
var tb_position;
(function($) {
    tb_position = function() {
        var tbWindow = $('#TB_window'),
            width = $(window).width(),
            H = $(window).height(),
            W = ( 833 < width ) ? 833 : width,
            adminbar_height = 0;
            //...

The above code ends up redefining the tb_position function with some hard coded height/width values. There's also custom style rules scoped to a particular page with a body class.

#File: wp-admin/css/common.css
body.about-php #TB_window.thickbox-loading:before,
body.plugin-install-php #TB_window.thickbox-loading:before,
body.import-php #TB_window.thickbox-loading:before,
body.plugins-php #TB_window.thickbox-loading:before,
body.update-core-php #TB_window.thickbox-loading:before,
body.index-php #TB_window.thickbox-loading:before {
    content: "";
    display: block;
    width: 20px;

There's no great or elegant work around here. For my own purposes, I'm calling the following (custom written) javascript function prior to display my own thickboxes (this also requires me to take over opening the thickboxes myself with calls to tb_show)

var resetWordpressHacks = function(){        
    //remove these styles from body if they exist
    var classes = ['about-php','plugin-install-php','import-php',
        'plugins-php','update-core-php','index-php'];
    var removed = [];
    $.each(classes, function(k,v){
        if(!$('body').hasClass(v)) { return; }
        removed.push(v);
        $('body').removeClass(v);
    });                

    var tb_position_original = window.tb_position;

    //some wordpress pages redefine this function which breaks
    //the thickbox, so we need to reset it here.  
    window.tb_position = function() {
        var isIE6 = typeof document.body.style.maxHeight === "undefined";
        jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
        if ( ! isIE6 ) { // take away IE6
            jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
        }
    }

    var tb_remove_original = window.tb_remove;
    window.tb_remove = function()
    {
        $.each(removed, function(k,v){
            $('body').addClass(v);
            window.tb_position = tb_position_original;
        });
        tb_remove_original();
    } 
}

This function will

  1. Remove body classes with custom style rules that change the display of the Thickbox close button (a hardcoded list, unfortunately)

  2. Re-re-definine the tb_position function to the stock thickbox version (again, with a hard coded function copy/pasted from the thickbox library)

  3. Monkey Patches, redefines the tb_remove function to restore the body class and custom tb_position function from above before calling the original tb_remove function

The end result of this is Wordpress's size and style customizations are un-done, but restored when the thickbox closes. I can't speak for how stable this is, but it seems to be working for me at the moment. Also, this function doesn't undo every change (some are scoped away an not accessible), so keep that in mind when using this solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.