Perspective 'cover' docked views -- how to remove glow?

So there is a default outer glow on any docked view that is using the ‘cover’ option. I’ve been trying to figure out how to remove that glow as it sort of messes up other things we’re doing in terms of styling. I’ve tried using the ‘boxShadow’ and ‘box-shadow’ css properties(within the designer) but haven’t had any success.

Is this a global property that needs to be over written somewhere? The same glow doesn’t exist when using the ‘push’ option on docked views, so it is clearly being turned on somewhere that I can’t find.

Currently using Ignition 8.1.7

Yep it’s set in global css styling. You can override it in your custom theme or by injecting css into a component’s styles. Not at laptop at the moment, but you can find what you need to override (what sets the style) by using your browser dev tools and inspecting the dock. You’ll then be able to see what css is being applied to it and from what selectors.
Once you know the selector, you can use that to override the styling e.g.

.ia-component-name {
    margin: 10;
}

Thanks for your reply. That got me to the right place, now just to go in and swap those out in the CSS. Thanks!

For someone else looking the CSS classes to modify are:

.docked-view.dock-cover-shadow-left
.docked-view.dock-cover-shadow-right
.docked-view.dock-cover-shadow-top
.docked-view.dock-cover-shadow-bottom

1 Like