Skip to main content
C
CZ_964521715-Moonstone
15-Moonstone
November 6, 2024
Solved

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

  • November 6, 2024
  • 2 replies
  • 1109 views

 

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.

Best answer by CZ_9645217

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

 

 

2 replies

S
Surya_Tiwari16-Pearl
16-Pearl
November 6, 2024

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

 

C
CZ_964521715-MoonstoneAuthor
15-Moonstone
November 18, 2024

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

C
CZ_964521715-MoonstoneAuthorAnswer
15-Moonstone
November 21, 2024

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

 

 

    Terms & ConditionsCookie settingsAccessibility statement