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?
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:
You can see that the shadow is no longer present.
3 Likes
Got it thank you!
Two questions off of that:
- 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.
- 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:
- 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).
Not quite sure if this thread is the appropriate place for this, so feel free to split it to its own thread if not, but I am actually having some trouble with the opposite of this issue. I’d like to add my own box shadow to the docked views. I’m using 8.1.2 and it looks like must have been removed at some point. I added the following lines to the themes/light/app/dock.css file, but I don’t see the results being referenced at all when I inspect the session elements with Chrome’s web dev tools (the project IS set to use the light theme; though I will move this all to a custom theme once I get it working to avoid it being overwritten in the future):
.docked-view .docked-view-left .docked-view-top {
box-shadow: 6px 6px 6px #00283D;
}
Am I doing something obviously wrong here?
I believe there is some restarting required when modifying theme files, but I can’t remember if the Gateway requires a restart or if you just need to clear the browser’s cache to pick up file changes. Try clearing the browser’s cache so that it is using the new theme changes. If that’s not enough, we can see if more is required.
I tried clearing the browser’s cache, launching in an incognito window, launching in a different browser altogether, and restarting the gateway. None of those applied the desired box shadow to my project’s docks. I ended up just applying the box shadow to the root container of each dock’s view and a slight padding to make it visible in order to achieve the same effect.
The problem is" .docked-view-left .docked-view-top"
The css is now looking for a component with all 3 of these classes, and i doubt there is one with both the "left" and "top" class
If you want it for the left one use : .docked-view .docked-view-left
If you want it for the top one use: .docked-view .docked-view-top
For all docked views (including bot and right) you can just use .docked-view
For both left and top either make 2 lines or seperate the two selectors with a ","
.docked-view .docked-view-left, .docked-view .docked-view-top
1 Like
Looking at the web dev tools in Chrome again, your suggestion makes perfect sense (I am not so CSS-savvy, so things like this are not immediately obvious when staring at the code alone). I am not seeing the changes apply yet after updating it based on your suggestion, but I’ll play around with it a little. Thanks for your help!
im pretty sure those css selectors are right, idk about the box-shadow tho.
You might need to clear cash to load in new css tho;
1 Like
