ThickBox width can’t be changed in admin

4 Views

I’m trying to make pop up in admin area (in post edit screen) and i can’t make my thickbox wider then 670px (width: 670px).

Here’s my thickbox code that shows thickbox:

Read More
tb_show( ed.getLang('m7.popup_title'), '#TB_inline?width=800&height=600&inlineId=mygallery-form' );

(it works after clicking the tinyMCE button)
and i get div with id=”TB_window” 

<div id="TB_window" style="width: 670px; height: 216px; margin-left: -335px; top: 48px; margin-top: 0px; visibility: visible;">

(code is from google browser)

So if i manualy change width and then resize browser it gives 670px back to width..
Can it be somehow changed so that thickbox show all the content wich is 800px wide ?

it creates insede #TB_window div with id=”TB_ajaxContent” wich is 800px wide

Post Views: 4

Related posts

6 comments

  1. Your are correct it cannot be changed and it looks like there has been no change on this since your question. There is a ticket if anyone is interested in working on this in the WordPress core…

    WordPress Core Trac

  2. I know this post is old but you can just reset the element’s style attribute by using the setAttribute function just below the tb_show().

     tb_show( ed.getLang('m7.popup_title'), '#TB_inline?width=800&height=600&inlineId=mygallery-form' );

// Get the id of the element
var tb = document.getElementById('TB_ajaxContent');

// set the attribute to an empty string or your desired width/height.
tb.setAttribute('style', '');

    If you set the style attribute to an empty string you should be able to use css from an external file instead of inline.

  3. From the comment under my question ( may be someone could miss it, so posting it as an answer )[PS: slightly modifyed it]:

    I think i found a solution how to change the width, but that’s not the real solution.. I still don’t get it why thickbox width is 670px (as u can see in my code (will follow next) the global thickbox width is set like the passed arg!! ) So the solution was:

    function m7_resize_thickbox(){
  jQuery(document).find('#TB_window').width(TB_WIDTH).height(TB_HEIGHT).css('margi‌​n-left', - TB_WIDTH / 2);
}

jQuery( document ).on( 'ready', function() {
  tb_show( ed.getLang('m7.popup_title'), '#TB_inline?width=800&height=600&inlineId=mygallery-form' );
  m7_resize_thickbox(); // after tb_show we need to update width/height values; we could also do something like jQuery( window ).trigger( 'resize' );
}

jQuery(window).on( 'resize', m7_resize_thickbox );

  4. For this case you can use css to force minimum width to 800px

    #TB_window {
  min-width:800px!important;
}

  5. I ran into this issue as well but needed to add height, I found this css code to be very effective!

    .thickbox-loading {
    min-height: 500px!Important;
}

    I put this in the CSS for the plug-in I was having an issue with, in the Admin area for that particular plug-in so it shouldn’t effect anything else.

    Hope this helps!

Comments are closed.