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
I am glad that you find my suggestion helpful.
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.
Hi Bozhidara,
Thank you for your response and explanation.
We do not use tab headers in the application.::part(pane-header) in the css works fine in the project, but the active state does not. This also applies to ::part(pane-header-content), which works fine, but ::part(pane-header-content active) does not. Do you have any idea what this could be? I may not be the first to run into this.
(I have also put the code in the example, it also works properly there.)
I look forward to your response.Thanks in advance.
Hi Marieke,
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.
We have set up the Dock Manager and custom styling exactly as the documentation and example describe. But unfortunately it still doesn't work properly.
We work with Angular, the example you indicated is not set up in Angular. We would like to see a working Angular example so that we can look at this next to our own code.
Thanks in advance for your cooperation.
Best regards,Marieke
Thank you for sharing that the Dock Manager is used in an Angular app. In an effort to test styling in such a configuration, I created a sample Angular app with a dock manager web component, which you can find attached below. Indeed, the active selector does not seem to have effect when set similarly as in the pure html & web components sample.
What will fix this is specifying these rules by ‘penetrating’ the host element View Encapsulation with the help of the ::ng-deep combinator, for instance:
:host{ ::ng-deep { igc-dockmanager::part(pane-header active) { box-shadow: inset 0 -2px 0 0 #f3c599; color: #f3c599; } } }
Please, test this on your side and let me know if it helps.
Best regards,Bozhidara PachilovaAssociate Software Developer
0647.dock-manager-angular.zip
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.
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 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.