We would like to apply custom css to the dock manager component. How can we do this at Infragistics without having to add an entire theme to the project? For example, we want to adjust the height of the header, font color of the title and also the background color of the header, etc.
My preference is that this can be put in a general css file and that :host :deep don't have to be used. Just by adding custom classes.
Thank you in advance.
Hi Marieke,
I am wondering if you had the chance to check out the sample linked in the previous message? I am asking this, because, as you can see there, the scrollbars within the DockManager are affected. As you can see in the styles.scss stylesheet, the ::-webkit-scrollbar(-*) selectors do not target a particular css part and affect all currently rendered scrollbars within the html document. These styles are defined for the root stylesheet, however they can also be specified on the component-level, for example:
: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
Thank you for your response.I asked the question because the webkit code doesn't work this way in the Dock manager, but it works on other elements in the project.
Therefore the question is how to apply the webkit specifically to, for example, igc-dockmanager::part(content-pane)? That is within the support of Infragistics :)
Hello Marieke,
I am glad that you found the root cause of the issue.
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.
Thanks for your help Bozhidara.
We finally figured out what the bug was. It had to do with an older version of Chrome. Now it's resolved. :)
Just another quick question. On which part of the dock manager can you (cross browser compatible) indicate that the scrollbar should be thin?
Thank you for the reply.
In order to run the previously attached sample on your side you will first have to install the required dependencies by executing the “npm install” command in the project directory, after which running it with the “ng serve” command.
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 PachilovaAssociate Software Developer