Thickbox width and height parameters are ignored when using TB_iframe

[harmr]

I tried to load a thickbox with custom width and height parameters, like the codex says:
?TB_iframe=true&width=450&height=120
anyway regardsless of what values I use, custom with and height values are ignored.
I debugged /wp-includes/js/thickbox/thickbox.js and parameters are read in correctly,
anyway it does not have any effect when setting them for iframe-tag on line 198:

jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"'><div class='tb-close-icon'></div></a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
I tried to add the following code to check if resize is possible:

jQuery("#TB_window").css("width","450");
jQuery("#TB_window").css("height","120");
this failed generally (although it worked when executing the command in the browser console)

[iseulde]

I'll look into it.
Related: #26952.

[iseulde]

Which WordPress version did you try this in? It seems to ignore the set width in 3.8 as well.

[harmr]

yes, forgot to mention that. Tested with 3.8.1 and 3.9-beta2 - both negative.

[afercia]

hi,
seems tb_position() in thickbox.js is not executed at all when in the same admin page both thickbox.js and media-upload.js are enqueued.
As far as I can see, the tb_position() function in:
/wp-includes/js/thickbox/thickbox.js
is then overridden in:
/wp-admin/js/media-upload.js
/wp-admin/js/plugin-install.js
/wp-admin/js/theme.js

For example, in a edit post page, both thickbox.js and media-upload.js are enqueued. Say we add a button that opens a thickbox, specifying width and height as per the documentation, it won't work.
That's because the first tb_position() in thickbox.js is replaced by the tb_position() function in media-upload.js which first gets the global tb_position object (the function from thickbox.js) and then assigns a new function.
So, when the window is larger than 720px, the thickbox width will be 670px ( W - 50 ) as set by tb_position() in media-upload.js.

For a quick check, just rename/prefix all the occurrences of 'tb_position' in thickbox.js and it will work.
For a fix, I don't know if and where the tb_position() functions in
media-upload.js, plugin-install.js, theme.js
are still used or not. maybe just prefix them or remove them if not used?

Last but not least (sorry for TL;DR).
In the documentation at ​http://codex.wordpress.org/ThickBox there's an example about "Loading inline content" which is a bit misleading and if used that way it will make tb_parseQuery() fail,
For example. if the admin page URL already has a query string, e.g.:
?post=4524&action=edit

using the example link:
#TB_inline?width=840&height=640&inlineId=my-thickbox
will return no width:
Pairs:
["post=4524", "action=edit#TB_inline?width=840", "height=640", "inlineId=my-thickbox"]
Params:
{post: "4524", action: "edit", height: "640", inlineId: "my-thickbox"}

using:
#TB_inline&width=840&height=640&inlineId=my-thickbox
will return:
Pairs:
["post=4524", "action=edit#TB_inline", "width=840", "height=640", "inlineId=my-thickbox"]
Params:
{post: "4524", action: "edit#TB_inline", width: "840", height: "640", inlineId: "my-thickbox"}

using:
#TB_inline=true&width=840&height=640&inlineId=my-thickbox
Pairs:
["post=4524", "action=edit#TB_inline=true", "width=840", "height=640", "inlineId=my-thickbox"]
Params:
{post: "4524", width: "840", height: "640", inlineId: "my-thickbox"}

[chrisvanpatten]

I'm having the same issue with inline content, but after reading afercia's comment I can't tell if it's an actual bug in WordPress (or ThickBox) or just a problem with the codex documentation. Both afercia's second and third examples work, but it also requires you to assume there is a query string set which is maybe a bad assumption to have to make?

Also worth noting that the width/height on the thickbox only seems to affects the content element inside the thickbox, not the container/frame. Maybe that's by design, but it seems unintuitive.

[afercia]

hi chrisvanpatten,
the query string thing is a secondary issue, you can always use something like this:
href="/?TB_inline&width=800&height=640&inlineId=someId"
with a slash at the beginning, the resulting link will have just the parameters thickbox needs, regardless if the page URL you're currently in has a query string or not.
Btw this should be documented, average users will tend to just copy and paste the example in the documentation.

The real issue is that even with a correctly formatted query string, thickbox won't correcly work in pages where both thickbox.js *and* media-upload.js are loaded.
For example, this happens in the "edit post" page.
media-upload.js has a function that completely overrides the original tb_position() funcion in thickbox.js

[chrisvanpatten]

Got it... so it's a mix of bad documentation *and* an actual bug. Good to know. I'll do some testing and update the codex.

[andddd]

Is it fixed? How do you workaround that issue?

[ericdaams]

This is still happening in 4.4. Both the syntax in the Codex and the alternative syntax given by @afercia (href="/?TB_inline&width=800&height=640&inlineId=someId") fail to produce a window of the correct size.

To clarify, the #TB_ajaxContent div will get the set width & height, but the #TB_window div always ends up being 783px (unless you're on a smaller screen).

[fabiantodt]

hi there,
i tried the solution from this stackexchange thread ​http://wordpress.stackexchange.com/questions/56271/how-to-enlarge-thickbox-media-library-iframe
it "worked" - the thickbox i wanted to display worked correctly, but of course the media manager won't work then.
but i think it has something to do with tb_position() as mentioned in this thread.

[jasonwcomes]

For some quirky reason rearranging the url parameters fixed my issue of height and width being ignored with inline. Hope this helps.
<a href="#TB_inline?&inlineId=confirm-remove&height=150&width=225">

[bynicolas]

Replying to jasonwcomes:

For some quirky reason rearranging the url parameters fixed my issue of height and width being ignored with inline. Hope this helps.
<a href="#TB_inline?&inlineId=confirm-remove&height=150&width=225">

I had this issue on the edit.php page too.

I found that using #TB_inline?args was causing issues but using the variation #TB_inline&args fixed it.

basically, when using the ? (as suggested in the codex) the next parameter after the question mark (the width in my case) was ignored. Height worked perfectly.

I tried your notation and I'm surprised you had content into your modal because if I put the inlineId after the ?, then that's what gets ignored.

[Vahan4033]

Having the same problem in WP 4.6. Height/Width params. don't work. I tried all possible suggestions listed here. Definitely a bug

Replying to harmr:

I tried to load a thickbox with custom width and height parameters, like the codex says:
?TB_iframe=true&width=450&height=120
anyway regardsless of what values I use, custom with and height values are ignored.
I debugged /wp-includes/js/thickbox/thickbox.js and parameters are read in correctly,
anyway it does not have any effect when setting them for iframe-tag on line 198:

jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='"+thickboxL10n.close+"'><div class='tb-close-icon'></div></a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
I tried to add the following code to check if resize is possible:

jQuery("#TB_window").css("width","450");
jQuery("#TB_window").css("height","120");
this failed generally (although it worked when executing the command in the browser console)

[isalmeron]

The issue is that tb_position is being defined by media_upload.js | theme.js | plugin-install.js
My temporary solution is to wrap it into a variable inside tb_show( thickbox.js) so when called its calling the variable wrapper.

This could be solved by either renaming functions in a way that they does not override each other or defining the proper scopes into files|classes.

BTW I'm using WP 4.7.1 and the bug is still there.

[MoreSympathy]

Are there any updates on this? Still experiencing this in WP 5.2.2.