Fixed positioning of widget sourced via iframe to bottom right
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
4 hours ago
Hello:
I have a chat widget thats sourced via iframe. (This is manage-hosted Canvas). I want a behavior similar to the Panda widget icon thats part of this community page.
I included the iframe at the bottom of my page content like this:
<div><iframe id="widget-parent" style="position: fixed; right: 0; height: 704px; width: 100vw; border: solid 1px blue; z-index: 9999;" src="https://allowed-list-domain.com/file.html" loading="lazy"></iframe></div>
But I see that due to this commit https://github.com/instructure/canvas-lms/commit/b5389273af4002d86160d984f0877875646e4a59 the position: fixed is forcefully stripped away. And changes to "position: relative". (I'm not even sure why this is considered a security issue, given widgets are so common) The domain from where the file is sourced from is in the Allowed Domain list, but looks like that doesn't matter. I obviously cant modify the parent iframe due to cors from within my widget.
I have tried several variants of the "position" and related attributes like absolute, sticky, transform: translateY, height calc etc. Nothing works or doesn't given a normal user experience.
Is there a default CanvasLMS style or any way to achieve this behavior for a widget?
On every page, a mutation observer is created for the `#content` element. Whenever stuff is added to the page, it will run a little sanitize script. This goes to every `.user_content` element, loo...