I created a mini-version of a site that's been optimized for the iPhone, but on one of the pages, I have a scrollbar in a container, and it shows up when looking at it on the computer, but not at all on the iphone... Is there some kind of special magic that I need or something? The css is simple:
#container {
overflow-x: hidden;
overflow-y: scroll;
}
You will have to use some javascript, such as jScrollPane, or tell users to use two fingers to scroll. There are no traditional scrollbars on the iPhone.
Related
I need to have some help with an annoying thing.
I have an modal popup which has vertical scrollsbar inside. When scrolling inside the modal sometimes the background scrolls instead.
I have tried to add
body{
position:relative;
overflow: hidden;
}
which works fine on most of the browsers, but Safari for my iPhone still scrolls!
Please help me find how to solve this!
Regards Kristian
$('body').css('overflow','hidden');
$('body').css('position','fixed');
Did it for me.
I'm using Twenty Eleven theme of Wordpress.
In other themes, there is no problem but in twenty eleven there is a problem with Facebook like button's comments popup window. it's half shown. when I click "Like" button, the view is like below:
http://i.stack.imgur.com/Hgawi.png
I use Facebook plugin for Wordpress. How can I fix this problem?
Thank you so much for your help!
It's a bug in Twenty Eleven (and a few other themes, probably copy-pasted). Open your style.css and look for:
embed,
iframe,
object {
max-width: 100%;
width: 100%;
}
If you remove the max-width line, it should work! Maybe there's a more elegant solution but honestly, I don't know why the size of an iframe should always be limited to its container (in this case the FB button).
Maybe thats a better way of doing it!
Put a class on your Facebook Like Button div, in this case I used "fb-like" class.
.fb-like iframe,
.fb_iframe_widget iframe {
max-width: none;
}
Looking/testing for a lot of solutions I found one that hides the comment window (source here: https://stackoverflow.com/a/12829375/3687838 ) and then I wrote one that shows the window without being displayed in half. I'm not a programmer but from my small experience from tweaking wordpress plugins I came up with this ideea:
.fb-like {
z-index: 200;
position: absolute;
}
Copy/Paste it in your Custom CSS theme file. The z-index value can be changer even to 10000 if you want your window to be on top of everything.
If you want to hide the comment window, use the solution provided in the link above with a value of 27px instead of 20px.
The site I am currently working on (roemlunchdinner.nl) looks fine in all major browsers but Safari on the iPhone and the iPad seems to add extra margins or padding around elements on the lower part of the page. I have tried setting the margins and padding to zero on all relevant elements, setting specific widths etc. but to no avail. I cannot reproduce this is any other browser. Anyone here has an idea what is going on here?
I am new here so am not yet allowed to post screenshots. Here are the links to the screenshot I would have liked to post:
Safari Windows screenshot
Safari iPad screenshot
Mobile Safari resizes elements based on its best guess of what's going to be readable for the user.
You can override this behaviour across the entire site by doing this in your CSS:
body { -webkit-text-size-adjust: none; }
or you can target just individual elements.
try using media queries for ipad
#media only screen and (device-width: 768px) {
your css...
}
give different width and see. Hope this helps
add css to element or related class: padding:0 #important!;
I am using phonegap.
I want to keep a fixed header and footer,and i want to scroll the content in between them. For that i used div with:
div
{
width: 249px;
height: 299px;
background-color:Gray;
overflow-y: auto;
}
style.
But the div is not scrolling.
But in browser it is fine.
iOS doesn't allow scrolling within an element (div with overflow:scroll/auto or frames) so you can either design your site around that (usually for the best) or you can try iScroll, which is a javascript plugin designed to re-instate this ability:
http://cubiq.org/iscroll-4
Good luck.
Div scrolling does work in iOS if this property is added:
-webkit-overflow-scrolling: touch
I have some elements in my iPhone website that don't have any text in them but require the user to click and hold on them (DIVs). This causes the text-highlighting/editing loop/cursor to show up, which is really distracting.
I know there is a CSS rule for removing the black-box that shows up on clickable elements when they are touched. Is there anything like that to disable the text magnifier?
Just got a response from the Developer Center help desk. I needed to add this CSS rule:
-webkit-user-select: none;
Add this to the CSS
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
Use these CSS rules:
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
This is also useful in protecting content that you don't want copied or saved, such as an image:
#yourdiv img {-webkit-touch-callout: none; }
This solved it for me, in JS:
document.getElementsByTagName("body")[0].addEventListener("touchstart",
function(e) { e.returnValue = false });
Seems to bypass whatever the OS has in there to catch the touch.
I found this out while trying it out myself. First of all you have to add this rule to the enclosing element:
-webkit-user-select: none;
But that, by itself, is not enough on the iPhone. It turns out that the magnifying glass can still appear because, for example, a parent element would accept selection, or just because it feels like it.
However, I then discovered something cool - if your element adds a touchend and click handler to an element, then Apple's Safari finally avoids the annoying code path that causes the magnifying glass to appear, probably realizing that this element is meant for some UI interaction, and not selecting text. On an equally awesome note, if you do this on elements near the top of the screen, it will also cancel the appearance of the navigation in landscape mode! Not sure however how to cancel the appearance of navigation when clicking on elements on the bottom, does anyone have a solution for that one?
On IOS 15.2 -webkit-user-select: none; fixed the issue, but only partially.
A long press doesn't show the magnifier anymore. However, if you double-tap and hold, it magically still appears.
There is still no 100% reliable way except event.preventDefault on touchstart. But this also blocks underlying actions so things like buttons with long-press tooltips break. Therefore, it is not always an option...