How to Center Header Text Vertically and Horizontally in Grid Using Custom CSS or Theme

[CZ_9645217]

Dears,

I'm working with the grid component in Thingworx 9.6 and am looking to center the header text both vertically and horizontally within the header cells. I’ve attempted to achieve this using custom CSS, but I’m not seeing any effect. Here’s the CSS I tried:

@supports (ptcs-style-unit: "PTCS-CORE-GRID") { [part=header-cell] { display: flex; justify-content: center; } }

Unfortunately, this approach didn’t yield the desired result. If anyone has experience with customizing the grid header styling in this version (9.6) or has suggestions on how to make the header text centered in both directions, I’d appreciate the help!

Thank you in advance for any insights.

[Surya_Tiwari]

Hi @CZ_9645217  Look at the below KBs and let us know your output.

https://www.ptc.com/en/support/article/CS407881

https://www.ptc.com/en/support/article/CS367776

[CZ_9645217]

Hi @Surya_Tiwari ,

I studied your two links, the first one is based on the way of property configuration, and what I need is based on CustomCSS, so that I can write it in the Theme in order to apply it globally;

the second one is AdvanceGrid's customcss, and the new version of the Grid is not common to previous AdvanceGrid styles any more, and I've tried it and still it doesn't work. Thanks for your reply.

BR,

Chason

[CZ_9645217 · Accepted solution]

I've implemented it with the following CSS and left it here for others who need it.

@supports (ptcs-style-unit: "PTCS-CORE-GRID") {
    [part~="header-cell"] > div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
}

@supports (ptcs-style-unit: "PTCS-CORE-GRID") {
   [part~="header-cell"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}