Skip to main content
CZ_964521715-Moonstone
15-Moonstone
Nov 6, 2024 7:44 AM UTC
Solved

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

 

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.

CZ_9645217Answer
15-Moonstone
Nov 21, 2024 8:55 AM UTC

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;
 }
}

 

 

View in thread

3 replies

Surya_Tiwari16-Pearl
16-Pearl
Nov 6, 2024 3:04 PM UTC

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

 

Translate
CZ_964521715-MoonstoneAuthor
15-Moonstone
Nov 18, 2024 1:11 AM UTC

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

Translate
CZ_964521715-MoonstoneAuthorAnswer
15-Moonstone
Nov 21, 2024 8:55 AM UTC

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;
 }
}

 

 

Translate
    Terms & ConditionsAccessibility statement