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

I have been looking into your question about styling pane headers in their active state and what I can say that the active selector is valid and on my side this piece of code does target active pane headers accordingly and their color and box-shadow properties are set to the target value. To test this I modified the previously linked sample.

However, please keep in mind that the part(pane-header) would target content pane header components. It may appear that the code does not work in your project, in case your headers are actually tab headers, which have to be selected like this:

igc-dockmanager::part(tab-header active)

Please, have a look at the sample and the “Document 1” and “Document 2” tabs within the Split Pane in the Document Host area, or the tab headers within the SplitPane in the upper right corner.

Please, keep me posted on your progress.

Best regards,
Bozhidara Pachilova

According to the CSS Parts list, the “active” part name is a valid selector for the active state of pane-header, pane-header-content, pane-header-actions, tab-header parts. Additionally, as the isolated sample shows the styling getting applied correctly, this indicates that the issue is most probably local to your project. My suggestion is to compare any further discrepancies between it and the sample isolated project, that may prevent the styles from getting applied. No similar issues have been reported yet and I am afraid that any assumption would be a shot in the dark on my side. You could also try forking and modifying the sample with any styles or configuration aspects that you consider that might be related to the issue and see if it can be reproduced there.

Thank you for your cooperation. 

Looking forward to hearing from you.

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

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

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