# Issue with dynamic dock behavior

**URL:** <https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 23, 2025, 3:29pm UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294 "2025-01-23T15:29:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [January 23, 2025, 3:29pm UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294/1 "2025-01-23T15:29:54Z")

</div>

Good morning everyone,

I am trying to implement a dynamic dock on the project I am developing. To do this, I followed suggestions from some videos and topics I found online to modify the stylesheet.css as follows:

```python
.docked-view-left {
	width: auto !important
}

.psc-nav {
	width: 55px;
	transition: width 0.3s ease-in-out;
}

.psc-nav:hover { 
	width: 300px;
}

```

However, I am encountering the issue shown in the attached video, where you can see that when I click on the dropdown to change the language and move the mouse over the new language, the docked sidebar returns to the minimum width of 55px.  
How can I avoid this issue?

Thank you.

---

<div class="post-metadata">

**Author:** ![ryan.perretta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.perretta/32/75110_2.png) [@ryan.perretta](https://forum.inductiveautomation.com/u/ryan.perretta)\
**Post date:** [January 23, 2025, 4:04pm UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294/2 "2025-01-23T16:04:04Z")

</div>

I believe that the Selection components menu appears as a modal (it is not actually within your nav container) so it won't trigger the `:hover` pseudo-class for your style class when you enter it with your cursor.

You could probably mimic this functionality by using the `onMouseEnter` and `onMouseLeave` Mouse Events to change the class. The `onMouseLeave` event should only fire once your cursor leaves the bounds of the element so it should still work when you hover on the Dropdown modal.

I'd just change the `.psc-nav:hover` to another class (`navExpanded` or something) and use the script to switch between the two classes.

For `onMouseEnter`:

```py
self.props.style.classes = 'navExpanded'

```

For `onMouseLeave`:

```py
self.props.style.classes = 'nav'

```

There may be a pure CSS way of going about this, but I am not aware of how.

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [January 24, 2025, 6:32am UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294/3 "2025-01-24T06:32:18Z")

</div>

This is exactly what I was expecting.

Thank you very much for your help, I appreciate it.

If can help someone else, this is the code for the stylesheet.css

```python
.docked-view-left {
	width: auto !important
}

.psc-navReduced {
	width: 55px;
	transition: width 0.3s ease-in-out;
}

.psc-navExpanded { 
	width: 300px;
	transition: width 0.3s ease-in-out;
}

```

and these are the code that I type on the view. I create also a custom to know the status of the docked so to manage some aesthetic changes.

**OnMouseEnter**

```python
	self.props.style.classes = 'navExpanded'
	self.view.custom.docked_status = True

```

**OnMouseLeave**

```python
	self.props.style.classes = 'navReduced'
	self.view.custom.docked_status = False

```

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [January 24, 2025, 6:53am UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294/4 "2025-01-24T06:53:11Z")

</div>

Another thing, remember to set the initial class property of the container to one of the class you wish, otherwise the docked will open at a minimum width.

Later it will be change accordingly with the mouse event.

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [January 28, 2025, 6:48am UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294/5 "2025-01-28T06:48:00Z")

</div>

I need your help once again about this feature.

I set the docked display property as "pushed" but actually it is not working, it simple cover the views. It seems that this setting is simply override somewhere.

I don't understand if this is because of the stylesheet, do you have any idea?

Thank you very much

---

<div class="post-metadata">

**Author:** ![ryan.perretta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.perretta/32/75110_2.png) [@ryan.perretta](https://forum.inductiveautomation.com/u/ryan.perretta)\
**Post date:** [January 29, 2025, 1:29pm UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294/6 "2025-01-29T13:29:42Z")

</div>

The following quote defines the hierarchy of Perspective styles since the stylesheet was added:

> [@New Stylesheet resource](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787/1):
>
> The rules defined in this resource are inserted into the Perspective project in-between the theme files of the Gateway and the Named Styles of the project, creating the following hierarchy: `Theming > Stylesheet > Named Styles > Inline Props`

First, make sure you don't have any named styles or inline style properties defined on the component that might be overriding it.

Then I would recommend browsing through the elements of the rendered page in a local session (either `Ctrl+Shift+I` and navigate to the docked view OR right click on the page and select `Inspect` from the context menu)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/90ec0fb1b075eb3fa5a2d91e3af2ca967a0344f9.png)

It should look similar to this depending on your browser, but you should be able to see the style rules being applied to the element you have selected at the bottom and any rules being overwritten should be struck through with a line.

If you can share what you find is overwriting your rules it would be easier to solve the problem.

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [January 30, 2025, 12:00pm UTC](https://forum.inductiveautomation.com/t/issue-with-dynamic-dock-behavior/101294/7 "2025-01-30T12:00:40Z")

</div>

Thank you for the help, as soon as I have time I try to figure out it