Microsoft

Blog Categories

Subscribe to RSS feed

Archives

Enable one-finger-scrolling in SP2010 for iPad and iPhone

You want your iPad users to be able to scroll your SharePoint 2010 site with one finger.

It can be done with the two finger swipe but it doesn’t work as well and visitors may not know that. The solution involves using CSS to disable the – ribbon positioning system – so that the ribbon is no longer stuck at the top of the browser. But at the same time you don’t want the ribbon positioning disabled for browsers on the desktop. Because that is where the content owners are likely to do their editing and they are going to want the items on the ribbon available to them.

So this solution also involves using a media query to detect that the site is being visited by a device. With a CSS media query only those browsers that meet the requirements will be given the extra styles.

Here is all the special code that you will need. with comments to indicate what each element is for. Just copy and paste this into your custom CSS file.

/* for media that has a screen no larger than 768 pixels */
@media (max-device-width: 768px){
 /* set the BODY of the site to be whatever size the content is*/
 body.v4master {
 height: auto;
 width: auto; /* and let the scrolling happen normally */;
 overflow: auto!important;
 }
 /* same for the section below the ribbon */
 body #s4-workspace {
 overflow: visible!important;
 height: auto!important;
 width: auto!important;
 }
 /* cancel the width on the next item */
 #s4-titlerow {
 width: auto!important;
 }
}

 

Here is again without comments and I added two more styles that I think you should have to make sure everything is cleaned up. The code above will work but the code below can stop issues down the road.

@media (max-device-width: 768px){
 body.v4master {
 height: auto;
 width: auto;
 overflow: auto!important;
 }
 body #aspnetForm {
 height: auto;
 }
 body #s4-workspace {
 overflow: visible!important;
 height: auto!important;
 width: auto!important;
 }
 body #s4-bodyContainer:after {
 content: ".";
 display: block;
 clear: both;
 height: 0;
 line-height: 0;
 font-size: 0;
 }
 #s4-titlerow {
 width: auto!important;
 }
}

 

Tags: , , ,

Leave a Reply