Hello Marieke,

Thank you for posting to Infragistics Community!

I have been looking into your question and I believe you will find the Styling section of our Dock Manager documentation topic very helpful on the matter. As you will read there, you have the ability to customize the Dock Manager through some of the exposed CSS parts.

Here is also a simple demo, where some of the panes’ headers heights, background and font colors are altered by following this approach.

Please, check out these suggestions and let me know if I can assist you with anything else.

Best regards,
Bozhidara Pachilova

For your convenience, here you can also find a StackBlitz sample, configured as an Angular project, where the IgcDockManager web component is used. Please, refer to the dock-manager.component.scss style file for the applied rules. As you can see, the active styles are successfully applied.

Currently, I cannot tell for sure what may be preventing the active styles from getting applied in your own project, in case you have tried the suggested approach with ::ng-deep. As both samples show it working correctly, this indicates that the issue is most probably local to your own project. My suggestion is to debug your code and compare any further discrepancies between it and the samples, that may cause the observed issues. Alternatively, you could try forking and modifying any of the samples to reproduce the issues. This will be highly appreciated, so I can continue investigating this matter for you.

Thank you for your cooperation. 

Best regards,
Bozhidara Pachilova
Associate Software Developer

I have been looking into your latest question and modified the previously linked StackBlitz sample to demonstrate scrollbar styling. As you will see, there is nothing special about this approach, and the ::-webkit-scrollbar pseudo-element is used. Please, keep in mind that this is considered rather a general web topic and is not directly related to the IgcDockManager itself. Additionally, I am afraid that browser compatibility of particular CSS selectors is out of scope of Infragistics Support. Detailed information on the relevant scrollbar selectors compatibility can be found in the official MDN docs here.

As you can see in the sample, the rules defined in the styles.scss file affect the scrollbars within the dock manager. These scrollbars are rendered for panes’ contents, exceeding the available height and having "overflow: auto;" set on the parent container, or for the nested IgxGrid, for instance.

In conclusion, please, check out the sample for reference on how to target the scrollbars.

Best regards,
Bozhidara Pachilova

:host {
  ::ng-deep {
    igc-dockmanager {
      ::-webkit-scrollbar-thumb:hover {
        background: yellow;
      }
    }
}

For the purposes of the example, here is a forked sample, demonstrating a regular scrollbar on the html body element and the custom scrollbar style, affecting only the scrollbars within the dock manager.

Please, check out the sample and let me know which element you are referring to as not working with the scrollbar style.

To address your question about whether a particular content-pane’s scrollbar style could be targeted via the content-pane selector, I am afraid that this is not the case as the content pane part includes the entire content pane component, including the header and the slotted content. As I am assuming the scrollbar that should be styled is rendered on the slotted content element, for example a div, how it is rendered depends on the corresponding element’s height and overflow properties. As the panes’ contents are entirely defined by the developer, this configuration is up to you, however the sample demonstrares a possible setup, where the slot div has its height as 100% and the ‘overflow-y’ property set to ‘auto’ and its child div’s height is set to 150%. This causes a vertical scrollbar to appear. Additionally, how a particular container’s scrollbar can be styled is demonstrated by assigning the “yellowThumbHover” class on the first content pane’s slotted div and targeting it as follows:

div.yellowThumbHover::-webkit-scrollbar-thumb:hover {
  background: yellow !important;
}

I hope these directions are helpful for achieving the required styling in your project. Thank you for your cooperation. 

Best regards,
Bozhidara Pachilova