Docked Views - Dynamic Size Change?

Are there any plans to give you the ability to dynamically size a dock via script?

I have 3 different sidebar views docked (collapsed, hover, expanded) to get it the work the way I want. But that ended up creating a few other problems for me - when my hover state sidebar is displayed, the right padding on every page needs to be dynamic since that will need to be adjusted since the default collapsed view dock is no longer there. I'm still not happy with the end result because it creates an unnecessary animation for each page.

1 Like

There are no plans to provide dynamic sizes for Docked views at this time.

For the layout you’re describing and exhibiting in that attachment, I would recommend you create the Page/View with a View Canvas. This would allow you to set relative positioning for the “central” view based on the expansion state of the “docked” view, while still making use of a transition animation.

I’ve never used the View Canvas but I’ll give it a try right now. Thanks

I found a way to use a single docked view as a collapsable and expandable sidebar and I want to make sure I’m not overlooking anything that may create issues?

I’m overwriting the fixed width of .docked-view-left.
.docked-view-left { width: auto !important; }

Created a few empty styles in the designer and assigned each to different containers in my sidebar. I added my CSS to my custom theme to style the sidebar and used pseudo-elements to trigger width transitions and several other things (I didn’t like the accordion animation so I just made my own).


7 Likes

when you put the docked view in push content doesn’t work well

1 Like

I'm trying to figure out how you did this. Would you be willing to share more?

Edit

I ended up figuring it out and made a video to show others :smiley:

1 Like

Hi Matt,
Thank you very much for your insights and guidance.
I just want to provide more details of the setup which works for me (in the case where there are people wondering)

First, I override the fixed with of the left dock (e.g., light.css)

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

Secondly, I need to add 'minWidth' property to the view configured for the left dock.

Thirdly, to expand/collapse the left dock, I need to change the 'minWidth' accordingly (e.g., using messages in Perspective)

msedge_TnWIoYLMcC

1 Like

Alternatively, 8.1.19 added the alterDock scripting function.

8 Likes

Did you find a way to get this to work with a Docked View set to push content?

Maybe this can help you.
Be aware that this method is only validate with Edge and chrome

1 Like

Hi @Arnaud_Declerck,

When I use:

.docked-view-top{
	height: auto important!
}

On the style configuration of my top docked view, I get this behavior:


As you can see, depending on the screen resolution the project is viewed on, the content is not getting pushed, I want the top docked view to have an automatic height and be able to push the content automatically as well.

In the second image you can see that there is no problem, but in the first image you can see how the top docked view is on the content and is not pushing it.

you will need to adapt the margin of the center view in function of the height of the top dock.

1 Like