i have a scrollable div which has the CSS Attribute overflow. With my iPad i can scroll the content of this div, but there are no scrollbars. Is it possible to show this scrollbars and to use them with no special javascript (jQuery) plugin?
You cannot Add Scrollbars. In iPad you can scroll with your 2 fingers. it is better to show full content in mobile devices as overflow:visible. if you are using responsive design, this option is better.
Related
I'm using the panel widget of JQuery Mobile: http://demos.jquerymobile.com/1.4.1/panel/
It looks very nice on phones, but on tablet devices the panel is too small with respect to the screen size.
How can I scale the panel size and its content to the 50% of the screen?
I tried using transform:scale(1.5), but it has a lot of side effects, then I tried to customize the css according to the last part of the page http://demos.jquerymobile.com/1.4.1/panel/, but nothing changed.
Is there a simple way to modify the framework or to dynamically change the size of the elements without creating side effects?
I'm trying to figure out how to enforce a minimum height (for fullscreen effect) on a jquery-mobile dialog box, essentially I'm trying to cover over the backdrop entirely with the dialog box itself.
I'm using a header but no footer if that makes a difference.
PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps
I have a page that is straight from the jQueryMobile site. I'm including a table of names, but on the iPad, it doesn't allow the user to pinch the screen size.
Please refer to this answer:
http://forum.jquery.com/topic/problem-with-the-zoom-on-ipad
In short, jQuery Mobile injects a fixed viewport size into the page.
I am working with the iPad (mobile safari):
Question:
Does anyone know how to hide the scrollbars on iPad?
I have looked already looked into webkit scrollbar styling using ::-webkit-scrollbar... This does not work for the main windows scrollbars.
Scenario:
I have an repeating image inside of a div that is over 10,000px by 10,000px. I want the user to be able to swipe the screen to move around over this huge div, which is essentially one big image, WITHOUT the scrollbars showing up.
So I need the functionality of the scrollbars, I just need them to be hidden.
Suggestions?
Thanks for your help!
-slwd
You might be able to use the TouchScroll library: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
Otherwise, what I would do is set overflow: hidden on your div and then use JavaScript to implement the scrolling. This will require listening for touchstart, touchmove, and touchend events, and moving the x/y position of your image accordingly. If you need frictional slowing (similar to what's built into scrolling views on mobile Safari) you can implement that as well. Keep track of the dx/dy between touchmove events, use that as a starting velocity for when you receive a touchend, then use setInterval as a timer to apply the friction until some minimum threshold at which you stop the animation.
This is sort of a hack, but: Make your UIWebView about 10px taller and wider than the screen.
(Inspired by someone asking the opposite question.)