Custom height/width for thickbox in WP Backend

Question

I use thickbox in the WP backend for preview or other content. On own pages in the backend works my script very fine and a can use custom width and height for the thickbox. below my code:

            <script type="text/javascript">
            <!--
                var viewportwidth;
                var viewportheight;

                if (typeof window.innerWidth != 'undefined') {
                    viewportwidth = window.innerWidth-80,
                    viewportheight = window.innerHeight-100
                } else if (typeof document.documentElement != 'undefined'
                    && typeof document.documentElement.clientWidth !=
                    'undefined' && document.documentElement.clientWidth != 0)
                {
                    viewportwidth = document.documentElement.clientWidth,
                    viewportheight = document.documentElement.clientHeight
                } else { // older versions of IE
                    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
                    viewportheight = document.getElementsByTagName('body')[0].clientHeight
                }
                //document.write('<p class="textright">Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
                document.write('<a onclick="return false;" href="<?php echo WP_PLUGIN_URL . '/' . FB_ADM_BASEDIR; ?>/inc/index.php?username=<?php echo DB_USER; ?>&?KeepThis=true&amp;TB_iframe=true&amp;height='+viewportheight+'&width='+viewportwidth+'" class="thickbox button"><?php _e( 'Start Adminer', FB_ADM_TEXTDOMAIN ); ?></a>');
                //-->
            </script>

Now to my problem and question. I will use a thickbox on the page wp-admin/plugins.php and here dont work the script. WP set the height and width always to the core-values and this is to small for my request.

Maybe other readers have an idea or a solution.

Many thanks!

Answer 1

plugins.php page calls add_thickbox() function that enqueues WP native thickbox script and style. It has this in documentation:

If any of the settings need to be changed, this can be done with another js file similar to media-upload.js and theme-preview.js. That file should require array('thickbox') to ensure it is loaded after.

So there are different possible ways to approach this:

1. As WP suggest create and queue .js file that will add settings you need to defaults.
2. Re-register or disable native thickbox completely and replace with your own code.

Answer 2

Front End or Backend you can set the width and height of the thickbox via setting GET value of the source url.

the thickbox js code will be something like this:

tb_show('Demo', '?action=show_demo&type=extended&width=900&height=800');

notice the width and height parameter. And off course you will have to enqueue the thickbox script and style before.

Note: Code is tested and worked for me on frontend. It should work on backend too. If it doesn't work on backend please let me know. I will try to fix the code

Answer 3

The solution I read nowhere on the internet:

tb_position is the thickbox function that do strange things with the window size. You can easily and simply overide it by the time thickbox call it.

old_tb_position = tb_position;  
tb_position = function(){
    $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px', marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});    
};

// Set-up inner size
tb_show("Window title,"<?= $the_url; ?>&width=600&height=350",      
tb_position = old_tb_position;