# Advanced Stylesheet: Class in class

**URL:** <https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 7, 2023, 8:00am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505 "2023-08-07T08:00:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 7, 2023, 8:00am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/1 "2023-08-07T08:00:37Z")

</div>

Hi,

 ![MicrosoftTeams-image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8efe5ba1506379376f22d99bae0efdc8716ebf33.png)

This is maybe more a css question that an Ignition one.  
I've a class on a view that change dynamically in function of the view is extended or not (See yellow Highlight).  
Style class in the advanced stylesheet:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/16154c5b0fd4250ee853018dba223049ea33a1be.png)

Would it be possible from that class to change the left and margin surrounded in blue on the first picture.

If yes, how could i implement this.

Thanks in advance for your help.

Arnaud

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 7, 2023, 8:10am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/2 "2023-08-07T08:10:26Z")

</div>

Can you explain what you want to happen and when you want it to happen, as if css didn't exist ?

> **[The XY Problem](https://xyproblem.info/)**
>
> Asking about your attempted solution rather than your actual problem

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 7, 2023, 8:27am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/3 "2023-08-07T08:27:56Z")

</div>

Hi @pascal.fragnoud ,

I've a left menu set as shared dock view. this menu can be expand by the operator to show more information's.  
Before i used the alterDock scripting function to do that but when navigate to another page the dock come back to the original configuration.

so i create two style class in the advanced stylesheet (leftMenuDockClosed and Opened) and in function if the operator ask for the menu to be expanded or not i bind to the class property on the root container the correct class.

This work great but when the menu is expanding the main view and Header (Top dock) are covered. i would like to make it push the data instead. That's why i'm looking to change the left property and margin but those are in completely different views (Therefore in completely different elements).

So i would like that the custom style class change the style of the element where the call is made but also element from other views.

Hope this is more clear.

Thanks

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 7, 2023, 8:55am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/4 "2023-08-07T08:55:03Z")

</div>

> [@Arnaud\_Declerck](#):
>
> ... but when navigate to another page the dock come back to the original configuration.

That's correct.

> [@Dock Parameters Resetting between each page](https://forum.inductiveautomation.com/t/dock-parameters-resetting-between-each-page/76160/4):
>
> Known issues aside, AlterDock is only intended to work for the current page. As you move from page to page in your session, you are loading a new page configuration which will replace your existing Docked Views with whatever is configured for the Page config you have loaded. Yep, because you're loading a new (albeit same) Page configuration, which is replacing the old one. Since the value in page.path has not changed, the script will not be run again. Note: session.props.page.path is not kno…

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 7, 2023, 9:00am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/5 "2023-08-07T09:00:42Z")

</div>

Yeah, i found this completely non sense to not be able to alter a dock on session level instead of only page by page. At least for the shared one...

But my solution is actually working and the dock stays open even when navigate to a new page.  
If you are ok with the dock covering a part of your page (like the cover mode on the dock config).  
We prefer the push mode this add some difficulties when you want to do it the custom way and not using the build it option 🙂 .

All of this is based on that resource. [Ignition Exchange | Inductive Automation](https://inductiveautomation.com/exchange/2463%3Aoverview?check_logged_in=1)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 7, 2023, 9:02am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/6 "2023-08-07T09:02:46Z")

</div>

> [@Arnaud\_Declerck](#):
>
> this menu can be expand by the operator to show more information's.

Do you mean that the menu in the dock is expanded, or the dock is expanded ?  
Can you show screenshots of both states, and tell us more about how the operator interacts with it ?  
I mean, what's the mechanism that expands/collapses the menu ?

I kinda feel like this shouldn't cause that much trouble

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 7, 2023, 9:07am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/7 "2023-08-07T09:07:40Z")

</div>

> [@pascal.fragnoud](#):
>
> I kinda feel like this shouldn't cause that much trouble

I've had similar trouble on a bottom "announcement" dock. I wanted it to appear if there was a new announcement but let the user hide it with a Got it! button. I was using `system.perspective.open/close/alterDock` but it would reset after each page load. I tied the status to a session variable but the best that would happen was the docked view would transition in and out, pushing the page up for a couple of seconds. I haven't got a fix yet.

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 7, 2023, 9:11am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/8 "2023-08-07T09:11:33Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/85dfd8fb1a3969202e82fae9798f74e4acb4185c.png)  
When opening the session the menu is a bar of -+100px and only show the icons. The user can open it with the arrow on top of it.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dc27dd5573494b210476acd5505c01eb763b889d.png)  
Then we show more data. but since i want the user to choose if he want the menu to stay always open, i don't want the menu to cover the data on the header and on the central view.

But since the Menu, header and the central view are separate views this is more complicated to style it out from a central point like the Advanced stylesheet and make it also dynamic.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 7, 2023, 9:11am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/9 "2023-08-07T09:11:39Z")

</div>

Right, I think I'm starting to understand how it's more complicated than it looks like.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 7, 2023, 1:19pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/10 "2023-08-07T13:19:33Z")

</div>

while it could be possible to do with css...  
you might have a better time first trying something else.

alterdock doesnt seem to get saved, but what if you have two dock views? does that get saved?  
the second view just being the same but bigger? both set too on ondemand, content push

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/13624ed1da24669bbc7742d1445ea447d5331ab2.png)

(or does that ruin the transition?)

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 7, 2023, 8:05pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/11 "2023-08-07T20:05:11Z")

</div>

Hi @victordcq,

This was a clever hack. the transition stay the same but I have the same behavior.

FYI: you cannot have two time the same view as dock on the same side. so I create a menu view, then embedded that view into a small and large view and use those views as dock.

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 11, 2023, 7:35am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/12 "2023-08-11T07:35:55Z")

</div>

Hi @victordcq,

You say that this was possible to do with css.  
Do you have any direction in witch i can go further to do this with CSS.  
So as reminder i have:

- A view ("LeftMenu") set as the left dock in the shared settings
- A view ("Header") set as the top dock in the shared settings
- A main view set as the primary view for each page url.

The expand function is done like this:  
A custom property can be set set to true or false in the "LeftMenu" view. In function of that a class is set by binding to the root container of that view what allow me to change the width of the view. Those classes are defined into the advanced style sheet.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/1/519843205072f8c77285a471819fbcbcedfe64be.png)  
My goal was into the two .psc define how much the top and main view should go left so i can push the data more or less to the left.  
But since those classes are called into the Left dock view i don't know if we are able to change the property of other views or if we are just limited to the view where the class is used.

Regards

Arnaud

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 11, 2023, 8:06am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/13 "2023-08-11T08:06:56Z")

</div>

Like i said it wont be an easy task, since the menu's seem to be scripted as "containts" and not as flex.  
so you'll might have to change that in css...

But a **very very new** (so it might not work on all devices (works on chrome105+)) css selector is :has()  
these are some selectors which you might be able to use

```auto
.client-root:has(.docked-view-left .psc-leftMenuOpened) > .center-column.flex-col{
   padding-left:300px !important;
}

```

you might have to check the interaction between all the other docks idk, they have a scripted position so idk how this will affect them

```auto
.client-root:has(.docked-view-left .psc-leftMenuOpened) > .center-column.flex-col .docked-view-top{
   
}

```

when you found something post the solution 😉

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 11, 2023, 1:19pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/14 "2023-08-11T13:19:29Z")

</div>

> [@victordcq](#):
>
> `.center-column.flex-col`

```auto
/*Expand left dock*/
.docked-view-left{
	width: auto !important
}
.psc-leftMenuDockClosed {
	width: 100px;
	transition: width 0.2s ease-in-out;
}
.psc-leftMenuDockOpened {
	width: 300px;
	transition: width 0.2s ease-in-out;	
}
.client-root:has(.docked-view-left .psc-leftMenuDockOpened) > .center-column.flex-col .docked-view-top{
   	left: 310px !important;
}
.client-root:has(.docked-view-left .psc-leftMenuDockOpened) > .center-column.flex-col .center.view-parent{
   	margin: 40px 0px 0px 310px!important;
}

```

Here me go.  
After analyse on how ignition is changing the CSS code when using the onboard functionalities, i've found a working code.  
The two last line modify the position of my top dock and the central view of 310px to the left when the leftMenuDockOpened class is present.  
As for the moment this seems only to be working with chrome and Edge. I will try to debug on the firefox later.

if you have a bottom dock you should add a extra line to take care of that one also.

@victordcq your nickname CSS king fit you well 😄  
@Transistor maybe it will help you also

Thanks to everyone for the help

Arnaud

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 14, 2023, 6:59am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/15 "2023-08-14T06:59:32Z")

</div>

for firefox you have to enable the flag on your local firefox browser (surf to `about:config`)  
and turn this to true `layout.css.has-selector.enabled`

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 14, 2023, 7:05am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/16 "2023-08-14T07:05:29Z")

</div>

Isn't it enabled by default in latest versions ?  
I think I've used it before on firefox and never enabled it myself.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 14, 2023, 7:10am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/17 "2023-08-14T07:10:00Z")

</div>

no idea when it could be last updated

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 14, 2023, 11:16am UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/18 "2023-08-14T11:16:21Z")

</div>

> [@pascal.fragnoud](#):
>
> I think I've used it before on firefox and never enabled it myself.

Just manually enabled this on my Firefox (116.0.2 on Kubuntu 20.04).

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 14, 2023, 12:39pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/19 "2023-08-14T12:39:59Z")

</div>

For the moment this is not fully supported by Firefox so you need to enable it manually. On my windows machine, this doesn't seems to change anything. i will continue to debug and let you know if i find something

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 14, 2023, 12:55pm UTC](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505/20 "2023-08-14T12:55:24Z")

</div>

did update firefox?  
if enabling the flag does not help onthe newest version, then there is no way to do it with css like this on firefox.

[Next page](https://forum.inductiveautomation.com/t/advanced-stylesheet-class-in-class/77505.md?page=2)