Why does the container appear, then resize?

[MrAnalogy]

I noticed that the container for the "popup" appears on the screen empty, then it resizes with content.

I tried to follow the code but my .js skills are pretty poor.

Is it necessary to have it visible before resizing it? (I'm guessing maybe it has to be visible to resize to it's contents).

Thanks!

[jackmoore]

That's correct, I can't really measure the dimensions until the content is in the document flow. However, I could have done a better job avoiding this for inline content since that would be immediately available to measure on opening. Sorry about that. The real issue was not knowing what size asynchronously loaded content would be, such as ajax and images.

You can avoid the transition by setting the transition property to none, or by setting the initialWidth and initialHeight values to match the size of your content.

[MrAnalogy]

Thanks for the help!

If I set the width: and height: to a %, it still does the "flash the DIV empty at different size" And it does the same for inline as well. (see code below)

So maybe I'm experiencing a different problem. Here's a video showing https://www.screencast.com/t/ysodPbzLLQ what I mean

Live page https://www.bungalowsoftware.com/test/colorbox.htm#LocalDiv iFrame code: Launch page in iframe

On Fri, Sep 14, 2018 at 6:35 PM Jack Moore [email protected] wrote:

That's correct, I can't really measure the dimensions until the content is in the document flow. However, I could have done a better job avoiding this for inline content since that would be immediately available to measure on opening. Sorry about that. The real issue was not knowing what size asynchronously loaded content would be, such as ajax and images.

You can avoid the transition by setting the transition property to none, or by setting the initialWidth and initialHeight values to match the size of your content.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jackmoore/colorbox/issues/868#issuecomment-421501741, or mute the thread https://github.com/notifications/unsubscribe-auth/AGXb0LqXJTrTkTIHledaTH1leQucD1pOks5ubC87gaJpZM4WmnFF .

-- Clay Nichols President Speech & Language Software http://www.BungalowSoftware.com Work: (540) 951-0623

@ClayNichols https://twitter.com/ClayNichols on Twitter

[jackmoore]

See my previous suggestion about using transition: 'none' or setting the initialWidth/initialHeight sizes. Example:

<a href="#" onclick='$.colorbox({iframe:true, initialWidth: "80%", initialHeight: "90%", width:"80%",
height:"90%",transition:"elastic", href:"//www.BungalowSoftware.com"});' >Launch page in iframe</a>

Or

<a href="#" onclick='$.colorbox({iframe:true, width:"80%",
height:"90%",transition:"none", href:"//www.BungalowSoftware.com"});' >Launch page in iframe</a>

[jackmoore]

However, I agree this shouldn't be necessary for immediately loaded content (like inline or iframe). Sorry for the workaround.