Fixed positioning of widget sourced via iframe to bottom right

vasya10
Community Novice

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?
Labels (3)
0 Likes