CSS style inheritance of overlays in Full-Screen Mode.

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Hey guys,

I have different overlays that I am using in my project, and being that I am embedding it on multiple pages, I am trying to make sure the styles are consistent in all the instances of my project.

And what I have found, is that if I apply styles to the container, they are no longer inherited in full-screen mode.

This is because the canvas is moved out of the container div.

So, my question is, does the canvas have an ID? what can I assign my styles too to make sure that all the images, text etc inside of the full screen instance inherit my styles.

Thanks?
Photo of Dustin Moore

Dustin Moore

  • 50 Posts
  • 5 Reply Likes
  • puzzled

Posted 9 years ago

  • 1
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Official Response
My first thought is that you could and arguably should be giving your overlays a class name and making your CSS rules apply to those classes. That way, no matter what container they're in, they work. Is that an option for you?

If not, you can indeed access the canvas via viewer.drawer.elmt. It doesn't have an ID by default, but you can give it one.

Hope this helps!
Photo of Dustin Moore

Dustin Moore

  • 50 Posts
  • 5 Reply Likes
Thanks Aseem,

I do indeed give my overlays a class name. But there are some general things like font-size and some basic styles that I would like all my overlays to inherit.

The viewer.drawer.elmt work around is perfect.

Thanks!

Dustin
Photo of tomicrow

tomicrow

  • 1 Post
  • 0 Reply Likes
Check this pure css full screen overlay sample...CSS full screen overlay

No javascript needed

tom