3

Desired Behaviour

Embed an Excel document that is hosted on SharePoint online into an HTML page.

Actual Behaviour

The embed loads, however there is no horizontal scrollbar.

The only way to get to the data to the right of the view port is to click on a cell and then use the right arrow key to scroll to the right.

What I've Tried

I have followed instructions here:

https://support.microsoft.com/en-us/office/embed-your-excel-workbook-on-your-web-page-or-blog-from-sharepoint-or-onedrive-for-business-7af74ce6-e8a0-48ac-ba3b-a1dd627b7773

Unfortunately, due to tenant restraints, I can't share link to demonstrate the issue as there doesn't seem to be a way to 'anonymize' Microsoft 365 share links.

Below is a screenshot - you can see there is a vertical scrollbar, but no horizontal scrollbar.

The left column and top row are frozen panes.

I am expecting I should be able to 'scroll to the right', like I can in Excel online.

enter image description here

This is the format of the embed code used:

<iframe height="500" width="100%" frameborder="0" scrolling="no" src="https://my-tenant.sharepoint.com/:x:/s/site-name/********?e=*****s&action=embedview&wdHideSheetTabs=True&wdAllowInteractivity=False&wdHideGridlines=True&wdDownloadButton=True"></iframe>

I do not think this is an issue that can be resolved by wrapping the iframe in a div with some sort of overflow property on it - it seems the horizontal scrollbar within the iframe embed itself is not showing.

user1063287
  • 10,265
  • 25
  • 122
  • 218

2 Answers2

2

Microsoft support did some out of scope troubleshooting for me and said that they could see the horizontal scrollbar for a moment, and then it disappeared.

This made me look at the element in Chrome developer tools and I could see that the reason the horizontal scrollbar was not showing is because there is a div placed above it (the div is from the Microsoft embed code).

Below are screenshots of changing the element's CSS properties in Chrome developer tools:

With border: 1px solid red...

enter image description here

With display:none...

enter image description here

The latter change allows the horizontal scroll bar to be visible (the desired behaviour).

But there is no way to override CSS within an iframe.

For reference, the relevant style is:

.ewa-stb-ltr.skeleton-sheet-bar-old, .ewa-stb-rtl.skeleton-sheet-bar-old {
    background-color: #F4F4F4;
    position: absolute;
    height: 27px;
    width: 100%;
    z-index: 1051;
    display: none; /* <--- adding this in chrome dev tools makes horizontal scrollbar visible */  
}
user1063287
  • 10,265
  • 25
  • 122
  • 218
2

This bug is now fixed.

Thank you for providing such detailed feedback; it was super helpful in allowing us to fix the issue quickly.

Rotem
Excel Program Manager

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
user14099495
  • 29
  • 1
  • Thank you for information, however unfortunately I have to report that I am still seeing the same behaviour. The div with id `skeletonSheetBar` is covering the horizontal scrollbar that scrolls the content to the right of a frozen column. If I hide the div with the following, I can see the horizontal scrollbar, as desired: `#skeletonSheetBar { display: none; }` – user1063287 Aug 15 '20 at 06:23
  • 2
    Thank you for sharing an update. This answer would be much more useful if you told us which specific version of Excel will contain the fix, whether there is a service pack or update we can download to patch this bug, etc. As it is, this answer is just a stub that provides almost no useful information for future viewers. – Cody Gray - on strike Aug 15 '20 at 09:14