Issue with dynamic dock behavior

Ignition
1

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:

.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.

2

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:

self.props.style.classes = 'navExpanded'

For onMouseLeave:

self.props.style.classes = 'nav'

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

1 Like
3

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

.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

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

OnMouseLeave

	self.props.style.classes = 'navReduced'
	self.view.custom.docked_status = False
1 Like
4

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.

5

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

6

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

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
image545×908 35.6 KB

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.

1 Like
7

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