I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}
Related
What does the jssor Javascript base its image width calculations on for the jssor_1 div id?
I am creating a jssor image slider using Blogger Code option (paid subscriber) to copy/paste in my website CMS. Created page here: http://lower-hudson-regional-information-center.echalksites.com/groups/41146/zlorem_ipsum_1/just_slides
In <1300 browser width (and phone sized) responsive modes I observe the image width appears to extend too far on the right overflowing its div container. Screenshot example: screenshot with right edge overflow
Only possible issue I have been able to identify is that something is causing the Jssor Javascript to calculate an image width for the jssor_1 div id that is skewing the display of the slider on the page.
I am hoping a Jssor Javascript and/or CSS guru might lend their expertise in identifying the cause of this issue with using my jssor slider in my website CMS.
You defined padding for the css rule 'social-content'.
Please move jssor slider out from <div class="social-content">
My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.
I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:
The scrollbars that appear are not related to my application, but related to the commercials at the side.
In the image you can see what I'm talking about:
To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).
The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).
When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.
FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.
I have body:overflow=hidden.
(may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.
This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(
What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.
Fortunately, this bug has been solved by Facebook. Everything is working now.
I could not find an anwser to my question, beside it is hard to explain it in a few words.
my FB App is an iFrame Canvas, when I set the width to "fluid" the top status bar is left aligned.
when I change to fixed width, I am expecting that I got the same layout like FB always is, the status bar centerd, and my app next to the realtime app activity tab.
But the FB layout is still like "fluid" and my content is fixed width (760px) and is centerd, so I have white space all around it.
I want just the normal FB Layout, statusbar centered, my content is centered right next to it should be the activity tab and only left from my content should be whitespace.
Can anyone tell me how i can set it up right?
Here some screenshots to clarify:
expected: http://oi39.tinypic.com/t88dat.jpg
fixed: http://i40.tinypic.com/24drivk.jpg
fluid: http:// i44.tinypic.com/2po31tt.jpg
greetings
Try having the body style be {position: relative; left: someValue;}, where someValue is calculated based on the window width. So it would be something like someValue=(windowWidth - facebookSidebarWidth - yourcontentWidth) / 2;
I think you can subscribe to the window resize event and dynamically change the left float value according to the above.
UPDATE: I just learned that the iframe width is 480 px only when viewed over a secure connection, possibly because I am using social-server.com rather than having my own ssl.
I've designed a page tab to be displayed in a Facebook iframe. I designed it with 520 px in mind as the maximum width. However, Facbook loads the page in an iframe that is only 480 pixels wide.
It looks like it is supposed to be 520 pixels wide, because there is extra white space between the iframe and the next column. Also, I checked other pages with other custom tabs, and their iframe is 520 pixels wide.
So I wonder if this is a new limit on new custom tabs. I really appreciate your help!
Custom tab width is 520px, perhaps you need to set body margins to 0px in your css. Check this out.
i was struggling with this too - 480px wide is not actually a restriction, but it is the width your page will become if a vertical scroll bar get inserted - which happens if you don't specify the length of your page on the social server interface. you can change the dimensions, and hit the yellow refresh arrows, then refresh in facebook and it should look how you intend.
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
How can I remove the style around
links?
Or can I use a single image CSS sliding door method? To reduce HTTP request.
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
Set width to 19% of each button for
some reason there is spacing between
each button so 20% does not work.
Set ui-bar-a background to black so
it hides the spaces between my
images
Use this JS code to navigate pages $.mobile.changePage($("#about"),
"flip", true, true);
I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.