TWX 9.6 Grid styling the sorting icon

[JO_9930585]

The new grid has a sorting icon that takes up a lot of space when space is limited. I am trying to style this to remove this 8px margin. Any idea on how to remove this?

Alternatively, is there a way to remove the icon completely out of the box and just have the column clickable similar to the old widget? 

[TonyZhang · Accepted solution]

Hi @JO_9930585,

Please try the following custom CSS. Ensure to verify if custom CSS is still working after you upgrade your ThingWorx.

@supports (ptcs-style-unit: "PTCS-CORE-GRID"){
    [part=hit-area]{
        margin: 0;
    }
}

[JO_9930585]

Thingwors is saying this is invalid css and will not let me save this..

[TonyZhang]

Hi @JO_9930585,

Forgot to mention that please turn off the Linting (the toggle button) and you should be able to save the mashup successfully.

[JO_9930585]

This worked. Thanks! I will accept it as a solution. 

Would you mind explaining this part though? I don't see this in the CSS explicitly.

ptcs-style-unit: "PTCS-CORE-GRID"

[TonyZhang]

Hi @JO_9930585,

This is the new way of styling web component widgets introduced since ThingWorx 9.3.4.

PTCS-CORE-GRID is a web component and is the shadow host of the element (part=hit-area) that you want to style in this case.

Please check the ThingWorx Help Center - Applying Custom CSS Styling to Web Component Widgets