Change Docked View Style depending on ID

Ignition
,
1

Is it possible to change the style of .docked-view.docked-view-right depending on the Dock ID, let’s say a view has a docked view with an ID of 12 and I want docked-view.docked-view-right to have a certain style, but when I change the view to another one with docked view with an ID of 13 I want the style to be different for docked-view.docked-view-right.

Thanks in advanced for your help!

2

Ignore the fact that the formatting is making the applied ids look as if they're comments.

.docked-view-right {
    # general settings here
}
.docked-view-right #12 {
    # specialized settings here
}
.docked-view-right #13 {
    # alternate settings
}
1 Like
3

@cmallonee

}
.docked-view-right{
    height: calc(100% - 16.2vmin) !important;
    margin-top: 16.2vmin !important;
}
.docked-view-right #12{
    height: calc(100% - 16.2vmin - 5%) !important;
    margin-top: 16.2vmin !important;
    margin-bottom: 5% !important;
}

Something like this?, Cause it's not working for me.

4

!important is dangerous to use. I'm pretty sure that supplying that in any style rule essentially says "ignore any other setting that might be applied here", preventing your other (later) rules from being applied.

Also, make sure you're trying this out in a NEW browser tab every time, and verify the rules are being applied like you would expect by examining the Elements tab of your browser's Dev Tools. The new tab is important during testing as Designer save events don't always force the browser to retrieve updated browser resources.

1 Like
5

Add the language to get proper syntax highlighting and comments:

```css
code
```

3 Likes
6 
.docked-view-right{
    height: calc(100% - 16.2vmin);
    margin-top: 16.2vmin;
}
.docked-view-right #12{
    height: 100%;
}

Even with this setting in the stylesheet, donsen't see to have an effect. As you can see in the picture the ID of the dock is 12:

image
image252×530 21.8 KB

The .docked-view-right setting are still being applied to this docked view.

7

Did you check with the browser tools what the id actually is ?
I suspect it might not be just 12

8

The Dock ID is only used internally, and is not reflected in the DOM - and therefore can't be utilized by CSS. I made the mistake in this thread of conflating it with something like domId which IS part of the DOM.

There might not be a way to modify the Docked View CSS based on any setting you provide in the Designer. Even if you supply a unique domId prop to each root being used for the Docked Views the rule you create would be applied at the level of the id attribute - NOT the wrapper <div> of the Docked View itself.

1 Like