Click Through (Transparent) Docked View

Ignition
,
1

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?

3

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

4

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).

5

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:

.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:

.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:

.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 */
}
3 Likes
6

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.

.docked-view:has(.psc-Docked){
	box-shadow: unset !important;
	pointer-events: none;
	background: transparent;
}

Instead of going this route:

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.

1 Like
7

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.

8

Here's some documentation of the has pseudo-class: :has() - CSS: Cascading Style Sheets | MDN for anyone interested. Be aware of the browser compatibility when using it.

2 Likes