iphone and fb iframe height

Page: 1

Author Post
Member
Registered: Apr 2013
Posts: 8
Hi all,
I'm testing fb before buying some licenses.
I'm pretty impressed with the lots of oprions it offers.
Kudos to the programmer/s.
But I need to know if the problem I see is related to some misconfiguration or a fb limitation.
Here is the problem:
I created a web app using jquery mobile 1.3.0.
I have a link that should open a flip-book publication (created using http://flippingbook.com/) in a floatbox.
Essentially this consist in opening the html provided by flipbook.
So, I created a link this way:
<li><a href="flip/it/prodotti_accosto_freddo/files/mobile/index.html" class="floatbox"  data-fb-options="mobileNewWindow:false width:90% height:90%">testlink (floatbox)</a></li>

On desktop browsers this work perfectly.
But the height rendered in iphone gets out of the boudary of the viewport and you need to scroll the page by hand to discover the close floatbox link at the bottom of the fb.

How can I fix this?

TIA
tony
Administrator
Registered: Aug 2008
Posts: 3382
The content is bigger than the iPhone's small screen, so it simply cannot be displayed entirely within the screen.

I assume on the desktop the content is smaller than the monitor, so there's no fit problem. But even if there were, the floatbox could be auto-scaled to the screen-size limits and the content shown with scrollbars. Thus the floatbox can remain entirely onscreen and the user can scroll in the box to see all the content.

There are no scrollbars on iPhones, so a scrollable floatbox is not an option on that platform. (There is an awkward two-finger content scroll available, but it doesn't work very well, many users aren't aware of it, and there's no visual indication that the content might be scrollable.) The floatbox must be sized to show the content presented it to it. That size might be larger than the screen and the user may have to scroll the screen to see everything - just as they do with any and all content that extends past the screen limits.

This isn't really something that's broken, so it's not something that can be fixed. What would a fix look like? Truncate the content and simply not display some of it? That would be breakage. So there's really only one 'fix': if you want the entire floatbox to be within the screen boundaries you need to provide content that is smaller than the virtual (zoomed) screen size.


If it's really the accessibility of the close button on small screens that is the main concern, you could use the outerClose button and put it in the top left corner. "showOuterClose:true outerClosePos:tl"
« Last edit by admin on Mon Apr 08, 2013 9:43 am. »

Page: 1