I am having the weirdest problem. I'm trying to make a page that fits a resolution of:
width: 640;
height: 960;
for the iphone. But there is a hidden element that I can't access with the Developer toolbar or Firebug that is adding an extra 100pixels to the right of my page.
I've set the correct height and width for the html, body, and main containers but I'm still having the same issue.
You can replicate the problem by going to the following page and resizing your screen just below 740px wide. When you do this you see the horizontal scrollbar popup around 740 pixels. Here's an example page with the issue.
The scrollbar shouldnt popup until the window is resized down to a 640 pixel width because thats what I have all the elements assigned to.
The main overall issue is that when viewed on the iphone4 there is a 100 pixel gap on the right side of the screen that no matter what i do I cant get rid of because some element is making the page 740px width instead of 640.
My boss and I have been working on this for hours and still cant figure out what is causing that extra 100 pixels on the right.
Any suggestions would be greatly appreciated.
Place overflow: hidden on your HTML CSS attributes. Not sure where that element is coming from, but that will prevent anything from making scroll bars appear.
Related
I am using iframe-resizer for cross domain application, The Iframe loads fine in desktop and andriod devices but on my Iphone, I am facing below issue:
The bootstrap modal pop ups on Iframe app is hiding and flickering behind when I scroll on page.
I tried
-webkit-overflow-scrolling: touch;
on container of Iframe but that does not work.
Any help/suggestion will be highly appreciated.
We fixed the issue by using position:absolute instead of position:fixed
Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.
Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.
It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.
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;}
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.
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.
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.