Forum Discussion
Vertical Scroll Appearing in Task Pane Add-in for Outlook Web Version
Dear Microsoft Team,
I am currently developing a task pane add-in for Outlook, and I've encountered an issue where a vertical
scroll bar appears in the task pane when using the web version of Outlook. This issue significantly impacts the user experience, as it requires unnecessary scrolling to view content that should ideally fit within the task pane’s dimensions.
Issue Description: The vertical scroll bar issue appears only in the web version of Outlook. It is inconsistent across different configurations, as some team members do not encounter it. Our frontend developer, for instance, could not reproduce the problem, suggesting it might depend on specific configuration settings of the interface.
Environment:
- Outlook Version: Web version
- Platform: Office 365 Web, tested on multiple browsers
- Add-in Platform: Office Add-ins (manifest v1.1+)
Steps to Reproduce:
- Open Outlook Web and load the task pane add-in.
- Observe the task pane interface, noting that a vertical scroll bar appears in certain configurations.
- Scroll down to view content that could otherwise fit within the pane without scrolling.
Expected Behavior: The task pane content should resize to fit within the available space, eliminating the need for a vertical scroll bar when it’s unnecessary.
Attempted Solutions:
- Adjusted CSS styles, including overflow properties, to prevent scrolling.
- Set explicit height for the task pane’s content container.
- Tested across different configurations and browsers, with the issue appearing only in the web version of Outlook and not consistently reproducible by all team members.
Request for Microsoft Team's Support: As developers who are committed to building add-ins for Office 365, we rely on a stable and user-friendly interface to deliver a high-quality experience to our users. This issue with the vertical scroll bar hinders the usability and functionality of our task pane add-in. We request that the Microsoft team investigate and address this problem promptly, as it directly affects our ability to provide a seamless experience in the web version of Outlook.
For teams like ours that have chosen to build business solutions on Office 365, it is essential that these platform-specific issues are resolved to ensure compatibility and reliability. I’m attaching screenshots to illustrate the problem in detail.
Thank you for your attention to this matter. We look forward to a solution.
Best regards,
Chiril
Hallo!
We have a similar problem with our Outlook plugin. A scroll bar appears for some users, but not for others. The difference I have noticed in the plugin is that the HTML markup and the CSS styles outside the iframe are different. For example, ‘FlexPane_’ styles are used for the users for whom the scrollbar appears and ‘ms-layer’, ‘ms-fabric’, ‘ms-panel’ are used for those where this does not occur. Which styles are used obviously depends on the logged in user and not on the computer on which it is installed.
Our plugin is also used for appointments, here the problem does not occur. However, I noticed during the appointments that the plugin generally gets more space on the left and right.
I hope this information helps with troubleshooting.Best regards
Andreas
Markup without scrollbar:Markup with scrollbar:
More space in appointments (orange color) vs. Mail (green color).
Dear Andreas,
Thank you very much for shared information.
I will send it to my colleague fronted, but as I understand we are not able to assign styles outside of taskpane container.Hallo Chiril,
You may already know this, but this is a general problem that will be resolved as soon as possible. https://github.com/OfficeDev/office-js/issues/5051 .
