[BUG] Docked Window box-shadow hard-coded, breaks transparency

In the most recent build of the 8.0.14 nightly,

If you try to have a docked window with any transparency on it (I just mocked this up to show it quickly, but I do have a project design that requires this) then there is a drop shadow on the docked container that I cannot figure out how to remove.

Prior to 8.0.13 there was a bug that added a default white background behind the root container of everything, so you could have any transparency. So I would assume this is related, but that is just a guess.

Any ideas?

image

EDIT:
Applying a box-shadow to the style of the root container doesnt solve this either, however if you do you cant see it in the webpage either.

(Looks same as the image above in the client)

Any updates on this? I have a project that needs a non-rectangular docked window, and I am unable to do that with this hard coded rectangular dropshadow on the dock

Did you try adding

.docked-view.docked-view-right{
    box-shadow: none
}

as part of your project’s custom theme?

In this example, I’ve turned off box-shadow for the right-side Docked View. The Label is part of the Docked View and the Button is part of the (covered) Primary View:
Screen Shot 2020-06-05 at 8.30.06 AM
You can see that the shadow is no longer present.

3 Likes

Got it thank you!

Two questions off of that:

  1. Is it possible to change the position of the handle with CSS? I see that I can change the color and what not, but not sure about location/shape/etc.
  2. Where is the official place that I could have gotten the addition that you mentioned above? Is that just something with CSS knowledge I would have known, or are you getting that from somewhere?

Note: I can see the css for the view-toggle div, I just am not sure where I would locate the CSS file in the theme folder for it.

Oooh… That’s a good question I don’t have the answer to. I’ll ask around, but I think manipulating position could be problematic because we have our own manipulations behind-the-scenes whenever there are more than one handle present.

This.

I don’t think it has any values in the theme folder; you can just add your own to your custom file to add properties as needed.

Two things:

  1. Did this accidentally get broken somewhere between 8.0.14 and 8.1.4? I have tried all of the following classes and can’t get the drop shadow to go away again…
.docked-view .docked-view-right .docked-view-left{
    box-shadow: none;
}

.docked-cover-shadow-right .dock-cover-shadow-left{
    box-shadow: none;
}

Secondly, is it possible to switch the dock width in the runtime at all?
I have had a clients project in play for a while, and the longer its been running the more things that have been added to the menu, and the more they’ve asked me for a “favorites strip” in which they can show just a few icons in a smaller format for the majority of the time, and only expand the menu when they need to navigate to something unique.

Here I am able to do what I want with transparency on the docked view, so that it could cover fine, but I need to push and not cover

.

I don’t know that “broken” is the right word, but it looks like the structure changed a bit. Examination of the style classes in the browser leads me to believe you want

.docked-view .toggle-wrapper{
    box-shadow: none;
}

No. The dimensions of the Docked Views are set on Page init, and can only be changed at this time by manually resizing the docked view (assuming that property is enabled as part of the docked view config).