how to use onyx.Scrim properly

I am trying to figure out how to use the onyx.Scrim kind properly. Basically I want the scrim to appear over my control when I mouse over it. When the mouse leaves the control the scrim should go away. Also clicking the scrim should fire off the click event

I tried adding my control as a component of my scrim kind but mouse events are not fired due to pointer events:none css class. I want the scrim to prevent mouse events going to the underlying control but I still want clicks on the scrim to be handled. Also when I hide the scrim my control hide as well.

Can some one explain how I should use the scrim kind, an example would be nice if possible.


  • Usually it's used automatically for you if you've got something based on onyx.Popup.
  • my control is a Panel inside the Panel kind its not a popup.
  • Scrims have vexed me a bit, mostly due to how CSS positioning works. I put together a test at

    Note how I had to set position: relative; on the CSS for the control that contains the Scrim in order for the Scrim to end up in the proper z-index stacking context.

    That's a very simple example and I still run into trouble with more complex layouts so I'm not surprised you are having issues. Scrim's are easiest to use when they are floating and cover the whole viewport, that's pretty straightforward.
  • Thanks FoulWeather. That is just the example I needed it is working now.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!