4

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:

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

  • I think i found a solution how to change the width, but that's not the real solution.. I steel don't get it why thickbox width is 670px (as u can see in my code (will folow next) the global thickbox width is set like the parsed arg!! ) So the solutins was: tb_show( ed.getLang('m7.popup_title'), '#TB_inline?width=800&height=600&inlineId=mygallery-form' ); m7_resize_thickbox(); jQuery(window).resize(function(){ m7_resize_thickbox(); }); function m7_resize_thickbox(){ jQuery(document).find('#TB_window').width(TB_WIDTH).height(TB_HEIGHT).css('margin-left', - TB_WIDTH / 2); } – Maikal Sep 14 '13 at 0:25
  • I guess the problem is with the tb_position() function in thickbox.js, becouse if i try to alert the width it does't work (alert doesn't happend).. – Maikal Sep 14 '13 at 0:36
  • tb_position() is overwritten in media.js due the media modal box. This js file is nearly implemented everywhere in backend. – Horttcore Jul 1 '14 at 14:29
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

1

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.

  • I don't know if u noticed, but i'v posted a solution ( workaround ) in comment under my question. The problem is still there and as i recall it's becouse of media modal overwriting resizing function of modal, but global variables of width and height are still set to new ones. My workaround should still work fine and instead of removing styles, like in you'r solution, you should just call my function for setting width and height. Basicaly it's the same way u do it, but with jquery and global width/height values. – Maikal Mar 17 '16 at 6:04
  • Yes.. I see now. At first glance your solution did seem to be a lot to write for a simple workaround but now since you have posted as an answer I can see clearly why it makes sense to modify globally rather than just changing the style attributes. I will try to use your solution. – FiGO Mar 19 '16 at 13:35
1

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 );
1

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

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

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!

-1

possible solution -call this function (https://codex.wordpress.org/Javascript_Reference/ThickBox):

add_thickbox(); 

somewhere in your php for me it worked :)

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.