Embedded SharePoint Online Excel file doesn't display horizontal scrollbar

user_1063287 0
Viewed 2049

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.

excel-online microsoft365 sharepoint-online
2 Answers

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 */  
}
user_10632870

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

user_140994950
Related