Access to placeholder CSS?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
If I understand this correctly, a widget runs inside of a placeholder in the "Viewer.html" file.

In my "widget.js" file, I have access to any DOM objects in my "widget.html", and can add, change, hide, etc. these using javascript.

But I don't seem to have access to the CSS properties of the placeholder from within my "widget.js" or "widget.html" fille.  

For instance, I have named my placeholder (e.g. "theFrame") and attempted to change the background color dynamically. e.g. $("#theFrame).css({"background-color":"red","opacity":1}) but no changes occur.

Is it possible to dynamically change the CSS of a placeholder?

I don't want to have to alter the HTML in the presentation itself.  I'm trying to make these placeholder changes from within my widget.
Photo of OC Zingo

OC Zingo

  • 220 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Hi,

I think the CSS for the placeholder is outside the context of what we can change in the widgets. From what I have read about how these new web apps are supposed work, this is by design. Google Chrome's app documentation, for example, recommends putting different components inside iframed sandboxes for better security. I'm guessing this is the same reason Rise Vision has our widgets in iframes. If you open up the Chrome dev tools, you can see the iframe for each widget. You can even change the CSS there, but unless you can get into the viewer.html file itself and make changes, there isn't any way I know of to change the CSS of the placeholder.

Stephen
(Edited)
Photo of OC Zingo

OC Zingo

  • 220 Points 100 badge 2x thumb
Thanks for the response.  I kind of came to the same conclusion myself, but I was hoping for some sort of workaround.  

The problem occurs because we have a widget that intermittently displays a text message.  Thus the placeholder in which it sits, is a large blank rectangle on the screen.  When no text is being displayed, the blank placeholder prevents interaction on the screen (e.g. mouse clicks, touches).

I was hoping for a way to show/hide the placeholder so that it would only be on the screen when the text was shown.
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
They talk about widget transparency here...
https://help.risevision.com/developer/widget-api/transparency
...but that is only talking about visible transparency, but I wonder if you could add "pointer-events: none;" to the body?
Photo of OC Zingo

OC Zingo

  • 220 Points 100 badge 2x thumb
Thanks for the idea.
Unfortunately "pointer-events" on the widget.html body tag does not work.

The only thing that actually works is getting access to the placeholder that contains the widget.
Setting  "pointer-events" there, does work.  But so does every other CSS setting. (visibility, z-index, etc).

So unless there is some way to gain access to the placeholder, I don't see a fix for this issue. 
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
OC Zingo,

I have spoken to our developers and they have indicated that what you are trying to do within a placeholder is not possible.