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.
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!
Hello 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
Hi Bozhidara,
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
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.
Best regards, Bozhidara Pachilova
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.