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.

[dgwyer]

This is still an issue in WP 5.7 for inline Thickbox, irrespective of parameter order (I've tried every combination).

If there's an alternative WP core modal that can be used I'd gladly switch to that but if this is the only core option then it would be nice to be able to control width/height properly.