SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe.

I attempted to solve this issue by including the following in my CSS:

-webkit-overflow-scrolling: touch;

Unfortunately, applying this to the <div> parent container of the iframe did not resolve the problem.

I have researched various solutions for scrolling problems within iframes but have not found one that addresses this specific issue.

Any assistance is greatly appreciated.

androidioscsssharepointiframe

Answer №1

Encountered a similar issue before. One potential solution is to include the following code in your CSS.

#s4-workspace, iframe { 
    -webkit-overflow-scrolling: touch; 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Layering elements using the z-index property in Internet Explorer 7,

Issue with text placement in a dialog div only occurring in IE 7. To see the problem, visit this page and click on any of the text boxes on the left side. Attempts to fix by adjusting z-index in the skin.css file for div.dialogFromAndTo did not resolve ...

cssinternet-explorer-7

How can I optimize webkit-mask-box-image with a high-resolution Retina image?

Hey there, wondering if it's possible to achieve high-quality Retina-level CSS masking with the -webkit-mask-box-image property. Specifically, I'm trying to round the corners of an element without using border-radius due to performance issues: . ...

csswebkitmedia-queriesretina-displaymasking

Collapse the borders of Angular's div layout container

I need help with collapsing the borders of div containers when generating a table using angular material's layout system. To see what I have done so far, please refer to my jsfiddle linked below: Jsfiddle Below is the HTML code snippet. Any guidance ...

htmlcssangularjs

"Taking a break" and indulging in Sass

When transferring Sass classes from another project, I wanted to create a wrapper to contain these styles locally. Here is how my wrapper is currently set up: .my-wrapper { @include "framework-main" } Initially, everything seemed fine. However, I soo ...

csssasslibsass

Exploring the Differences Between Nth-CSS and Jquery

What are the advantages of using the nth function in CSS instead of applying it through jQuery, especially considering its compatibility with IE? Is it better to simply use jQuery from the start and avoid using it in a stylesheet altogether? Hopefully thi ...

jquerycsscss-selectors

Steps to switch the displayed ionicon when the menu is toggled

My goal is to display the 'menu-outline' ionicon on my website until it is clicked, at which point the icon will change to 'close-outline' and vice versa. I am utilizing jQuery for this functionality. Although I am aware of how to togg ...

javascripthtmljquerycss

Tips for Aligning Several Images Horizontally in an Article

Does anyone know how to center pictures in an article horizontally? I've tried various techniques without success. If it would be helpful, I can share the CSS I currently have. However, I am open to starting from scratch with the CSS as well since I ...

csshtml

Tables that are not only responsive but also friendly to mobile

For the past week or so, I've been working on finishing up the layout for a single page. While I have managed to get the page somewhat functional, I am in need of assistance with both the original layout and ensuring it is mobile-friendly. The issue w ...

phphtmlcsshtml-table

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

htmlcsshtml-tablenested

How can we align divs in the center horizontally inside a parent div?

This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services. In the photo provided, you can see ...

htmlcss

Solving Testing Flaws within React Native

I keep encountering the following testing errors: console.warn err! at node_modules/react-query/lib/core/mutation.js:115:32 at tryCallOne (node_modules/react-native/node_modules/promise/lib/core.js:37:12) at node_modules/react- ...

androidiosreact-nativenpm

What could be causing my footer to be stuck in the center of my webpage?

Despite trying various methods, my footer remains stuck in the middle of the page. I even attempted to set the body height to 100% or 100vh without success. footer placement issue (https://i.stack.imgur.com/qzp2i.png) css: body { display: flex; flex-direct ...

htmlcss

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

htmlcsshtml-table

PHP and mysqli combine to create a versatile image slider with changing images

I am looking to implement an image slider that can be updated by the admin using php and mysqli. The admin should have the ability to easily add or remove images as needed. ...

phpjqueryhtmlcss

Why does the "margin" CSS style fail to function properly in FlowPanel within GWT?

I'm currently working with Gwt and have encountered a problem with styling buttons. Let's take a look at the following code snippet: .marginRight{ margin-right: 10px; } FlowPanel myFP=new FlowPanel(); Button myButton=new Button("Button"); Butt ...

cssgwt

Elements that intersect in a site's adaptable layout

I need to create a design similar to this using HTML/CSS with the Skeleton framework: view design preview I've experimented with various methods to overlap the background and image, utilizing absolute positioning for the image. However, this approach ...

htmlcssoverlappingskeleton-css-boilerplateresponsive

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

javascriptjqueryhtmlcssopacity

The functionality of classes containing <ul> elements is ineffective

Having recently embarked on the journey of learning html/css, I've encountered some confusion along the way. Allow me to showcase my basic web-page layout: <html> <head> <meta charset="utf-8"> <link rel = "stylesheet" type="text ...

htmlcss

Utilizing jQuery to apply a class to a targeted element when clicked

I'm currently working on animating a menu item where it expands to the left when hovered over, and contracts back when the mouse moves out. This part is functioning as expected. Additionally, I am trying to apply a specific color to the button by add ...

javascriptjquerycss

The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...

htmlcsswordpresscontact-form-7elementor