Hi,
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:
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
Can you explain what you want to happen and when you want it to happen, as if css didn't exist ?
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
That's correct.
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
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
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.
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.
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.
Right, I think I'm starting to understand how it's more complicated than it looks like.
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
(or does that ruin the transition?)
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.
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:
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.
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
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
.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
.client-root:has(.docked-view-left .psc-leftMenuOpened) > .center-column.flex-col .docked-view-top{
}
when you found something post the solution 
/*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
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
Isn't it enabled by default in latest versions ?
I think I've used it before on firefox and never enabled it myself.
no idea when it could be last updated
Just manually enabled this on my Firefox (116.0.2 on Kubuntu 20.04).
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
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.