# Click Through (Transparent) Docked View **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [March 16, 2023, 7:59pm UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185 "2023-03-16T19:59:20Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [March 16, 2023, 7:59pm UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185/1 "2023-03-16T19:59:20Z")
Is there a way to set the width of north/south dock, or height of a east/west dock (using CSS maybe)? Or is it always the entire width/height of the viewport? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 16, 2023, 11:39pm UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185/3 "2023-03-16T23:39:00Z")
I've wanted to be able to do this as well - maybe not exactly; I want to be able to create those popup notifications on some webpages when you click something and it tells you it completed successfully with a notification popup that fades in, then fades out at the bottom-centre of the screen. I still don't know if it's possible. I'm 99% sure that you can't change the width/height of EW/NS docks though ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [March 17, 2023, 12:04am UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185/4 "2023-03-17T00:04:54Z")
No, there is no way to set the width. Docked Views always span the entirety of the direction they are anchored to (width for North/South/Top/Bottom, height for West/East/Left/Right). ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [March 17, 2023, 3:41am UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185/5 "2023-03-17T03:41:17Z")
It's probably not the most elegant but you can achieve something similar with a few CSS tricks. Method boils down to a transparent "cover" dock that has a property to allow pointer events to access elements behind the dock. **Disclaimer** : Since this is undocumented, I would have to assume IA could choose to make changes at any time that would break this method. In your stylesheet resource (or theme files) add the following CSS rules, if necessary, replacing "bottom" with either "top", "left", or "right" - whichever side you want your dock to be attached to: ```auto .docked-view.docked-view-bottom { pointer-events: none; background: transparent; } .docked-view.dock-cover-shadow-bottom { box-shadow: none; } ``` Then create your docked view (coordinate with percent mode is probably best for this). Add whichever components or embedded views you want to be visible. For these elements you will need to add a custom value to the `style` property called `pointer-events` and give it a value of `auto` (this is necessary to override the property that you set in the stylesheet resource that affects all children elements inside the dock). Once your view is ready, configure the dock in the Page Configuration. You need to make sure you set the dock `Content` property to `cover` and give it a `size` that makes sense for your view. That should be it. One issue I've noticed is that if you dock this new view to the top/bottom and you have a visible left/right dock, the contents of the left/right docks still respond to transparent top/bottom docks (to be expected). You can overcome this by adding a CSS rule to your stylesheet that overrides the height: ```auto .docked-view.docked-view-left { top: 0 !important; /* Only necessary if your new view is docked to the top */ height: 100% !important; } ``` If you have a top/bottom dock that is visible you can replace the 100% with a calc: ```auto .docked-view.docked-view-left { top: 0 !important; /* Only necessary if your new view is docked to the top */ height: calc(100% - 50px) !important; /* Replace 50px with whatever your visible top/bottom dock height is */ } ``` ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [March 17, 2023, 1:10pm UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185/6 "2023-03-17T13:10:28Z")
I'll give this a try. My docked view already has a transparent background and I've hidden the shadow, I was just annoyed that there was a small sliver at the edge of the screen that a user wouldn't be able to click through. This seems like it'll fix all of those issues EDIT: Works perfectly. Like I said, I already had a style set to hide the shadow, so I just edited that. ```auto .docked-view:has(.psc-Docked){ box-shadow: unset !important; pointer-events: none; background: transparent; } ``` Instead of going this route: > [@WillMT10](#): > > Then create your docked view (coordinate with percent mode is probably best for this). Add whichever components or embedded views you want to be visible. For these elements you will need to add a custom value to the `style` property called `pointer-events` and give it a value of `auto` (this is necessary to override the property that you set in the stylesheet resource that affects all children elements inside the dock). I would rather apply a style to the dock(s) that I want to have this functionality, than apply something else to docks that I don't want to have this functionality. For that reason, I'm sticking with my custom style technique. Any dock that I give the style "Docked" will behave like this. ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [March 17, 2023, 5:48pm UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185/7 "2023-03-17T17:48:08Z")
I didn't even realize the `has()` function was a thing. That will make some of the other features I've worked on a lot cleaner. Thanks for pointing that out! It doesn't matter at this point, but just want to point out that the conflict with other docked views will only be an issue if you have multiple views docked to the same side since the CSS rules are specific to the docking location. Regardless, I still think your method is the more elegant approach. ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [March 17, 2023, 6:09pm UTC](https://forum.inductiveautomation.com/t/click-through-transparent-docked-view/71185/8 "2023-03-17T18:09:53Z")
Here's some documentation of the has pseudo-class: [:has() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) for anyone interested. Be aware of the browser compatibility when using it.