CSS to reduce Sort-icon hit-area padding for grids

[George_B]

Does anybody know the custom CSS that will reduce the 8px padding-left associated with the Column sort feature? The icon is 18px wide and then with 8px of padding it is too much for grid headers. Also the CSS for changing the background of the Sort-icon would great. 

[wcui]

which thingworx version are you using?

[George_B · Accepted solution]

Cersion 9.3.4 - The sort icon is 18px by 18px with 8px of padding-left.

[wcui]

I am afraid custom css for sort icon padding is not supported with Thingworx 9.3

[George_B]

I can change it using developer tools in Chrome so there should be a way to do it using CSS. margin-left and either color or background are the items that need to be able to updated. If you have a grid where the header has a black background the sort icon is invisible. 

[part~="sort-icon"] {
cursor: pointer;
color: yellow;
width: 18px;
height: 18px;
padding: 0px;
border-radius: 2px;

background: green;
margin-left: -6px !important;
}

The other option is to change the color Labels in a style sheet and then override it for every label on the page but that is tedious. 

[wcui]

[part~="sort-icon"], such kind of styles is no longer supported by TW9.3, it was supported by TW9.2 or older.

The Sort Icon/button background color is controlled by Style Theme - Colors - Text Colors - Labels, you can create your own Style Theme for Gird widget.

[gbell]

Ok, using the style sheet and updating the color for labels I can change the color of all labels then I can add the CSS below to change all but the sort icon back to black. It is best to have a second style with labels set to black during the design phase.

.widget-ptcslabel::part(root) {
color: #000000;
}