Opened 7 years ago
Last modified 18 months ago
#27473 new defect (bug)
Thickbox width and height parameters are ignored when using TB_iframe
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 3.8 |
Component: | Administration | Keywords: | needs-design |
Focuses: | ui, javascript, administration | Cc: |
Description
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)
Change History (17)
#2
@
7 years ago
Which WordPress version did you try this in? It seems to ignore the set width in 3.8 as well.
#5
@
7 years ago
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"}
#6
@
7 years ago
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.
#7
@
7 years ago
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
#8
@
7 years ago
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.
#11
@
5 years ago
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).
#12
@
5 years ago
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.
#13
follow-up:
↓ 14
@
5 years ago
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">
#14
in reply to:
↑ 13
@
4 years ago
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.
#15
in reply to:
↑ description
@
4 years ago
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)
#16
@
3 years ago
- Focuses javascript administration added
- Keywords needs-design added
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.
I'll look into it.
Related: #26952.