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.
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
Thank you for the response Bozhidara!This works for me.
Yet, I want to change the color of the box-shadow in the pane header when it is active.I wrote the css on this way, but it doesn't work:
Can you see what's wrong with this code?
Best regards,
Marieke
Thank you for your response Bozhidara.
Unfortunately your example doesn't work. The active states also don't work there either with the code:
:host{ ::ng-deep { igc-dockmanager::part(pane-header active) { box-shadow: inset 0 -2px 0 0 #f3c599; color: #f3c599; } }etcetera...
Can you send a working example in CodeSandbox or similar tool?
Thanks in advance!
Hi Marieke,
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
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?
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.
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 :)
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.