jackmoore/colorbox

colorbox position issue in Android App WebView

Closed this issue · 7 comments

coda-apps commented

Using Colorbox v1.4.31

I have Colorbox on my site, and opening images works perfectly.

I also have an Android app, that amongs other functions, contains my site in WebView. When I trigger colorbox within WebView in the App, on a long page - it opens - but waaaay below the fold. So, instead of it being centered vertically in the visible part of the screen, it opens vertically centered in relation to the entire length of the content - which could be many screens long, most of it hidden.

I hope i have explained myself well enough. If not, pls let me know.
Again, in a log web-page, in mobile form - the issue does not exist - only in WebView.
Has anyone run into this?

Thanks

jackmoore commented

Sorry, I don't have any experience with this.

You could try using Colorbox's "fixed" setting to use fixed positioning instead of absolute positioning and see if that side-steps the problem: http://www.jacklmoore.com/colorbox/#setting-fixed

Since that will used fixed positioning, you'll want to make sure that Colorbox has a maximum size so that any content overflow is scrollable and reachable.

Example:

$('.test').colorbox({maxHeight: '100%', fixed: true});
coda-apps commented

Thank you @jackmoore - will check and report back

coda-apps commented

@jackmoore i just checked my code, what i have currently. This should basically achive the same result? Or is there something here that could cause the behaviour that i am seeing in the WebView?
Thanks again!

$('.cbox_single').colorbox({
		maxWidth	: '80%',
		maxHeight	: '80%',
		opacity		: '0.4', 
		fixed		: true
	});
coda-apps commented

The more i look into this, the more i see its an issue with how webview understands positioning. The position of the image is relative to the webview container, and not relative to the device window. which means that the center will be off if the page is longer than 1 screen, and if your current viewing position is higher or lower than that page-length center.

Seems its very rare - I can't seem to find any info on this and virtually no responses on forums (after initial dis-belief!)

jackmoore commented

@coda-apps Sorry, Colorbox can only work with the tools the browser gives it. If you know that the visitor will be looking at the modal at the top of the page (it's a popup when they first land, or trigger element is near the top of the page), you can override Colorbox's inline positioning by using !important in your CSS. That way you can stick it within a certain distance from the top of the document. Example:

#colorbox { top: 100px !important; }
coda-apps commented

Thanks @jackmoore . thats not the case, ie, if i have a long page, the popups could occur anywhere along that page, not necessarily top or bottom.

coda-apps commented

I want to post an update and close this question with an update for anyone who runs into this issue in the future. It turned out that there was a bug in the app, and the "pull to refresh" module was interfering with the location of the popups. As soon as that was fixed, the modal opened in its correct position, based on the colorbox existing code mentioned above.

Thanks to all those who tried to help.