Remove \"pin\" header button from docking LayoutPanel

[Anonymous]

How can I remove the “pin” button in the header of a docking LayoutPanel? I’ve tried setting “headerButtons: [“close”]” in the config, but this doesn’t do anything.

[Anonymous]

Hi velocitytoo,

the “pin” button in the header of the LayoutPanels acts as “autoHide” button when the item is docked inside the DockingLayout and as “dock” button when the item is autoHidden. Since these are the basic operations of the DockingLayout items it’s not possible to hide the button for them via the offical API of the element (using the headerButtons property). However you can still hide them using a simple CSS selector:

smart-docking-layout .smart-auto-hide-button {
    display: none;
}

You can event target specific LayoutPanels by their id (id must be explicitly set in the DockingLayout’s layout configuration) and hide the button only for them:

smart-docking-layout #itemA .smart-auto-hide-button {
    display: none;
}

Best Regards,
Christopher

Smart HTML Elements Team
https://www.htmlelements.com

[Anonymous]

Great, thank you, that worked!

[Author]

Posts