Custom CSS on Grid widget no longer working after migration

[mariaSutton]

Hi, 
I recently migrated a mashup using the "Mashup Migration" steps. The legacy advanced grid used a Custom CSS, but after the migration the styles from the CSS seem to no longer have any effect on the grid. 

The grid header column require 3 different columns. 

-first 2 header columns are black 

-header columns 3-7 are blue

-header columns 8-13 are grey

Is there a way to have the Custom CSS recognized or perhaps Style Theme has an advanced feature?

TIA

[Surya_Tiwari]

Hi @mariaSutton  "Sample CSS for the Grid and Advanced Grid Widgets": https://www.ptc.com/en/support/article/CS314561

[mariaSutton]

Hi @Surya_Tiwari,

Thanks for the quick response. I tested the css provided in this article but it does not work. 

[mariaSutton]

I am working with ThingWorx 9.3.13

[rogerjn · Accepted solution]

Hi Maria,

I had the same issue with CSS working fine on grid-advanced. The "new" grid that was implemented I think in TW9.3 can be styled using the ptcs-style-unit instead of using shadow DOM CSS. Small example to get you started below.

BR,

Roger

@supports (ptcs-style-unit: "PTCS-CORE-GRID") {
    [part="body-cell"]:has(div.tooltip) {
        text-align: center !important;
        display: block;
    }

    [part="cell-html"]:has(div.tooltip) {
        text-align: center !important;
    }

    /* Tooltip definition */
    [part="cell-html"] .tooltip img {
        width: 15px;
        height: 15px !important;
        vertical-align: middle;
        margin-bottom: 2px;
        position: relative;
    }
}

[pshashipreetham]

Hi @rogerjn,

If I am not wrong, the Syntax "@supports (ptcs-style-unit: "PTCS-CORE-GRID")" is supported in Thingworx 9.4.

Thanks,

[Velkumar]

@pshashipreetham 

It is supported from 9.3.4

Breaking Changes to Custom CSS in ThingWorx 9.3.0 (ptc.com)