cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

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

George_B
6-Contributor

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

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. 

1 ACCEPTED SOLUTION

Accepted Solutions
George_B
6-Contributor
(To:wcui)

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

View solution in original post

6 REPLIES 6
wcui
14-Alexandrite
(To:George_B)

which thingworx version are you using?

George_B
6-Contributor
(To:wcui)

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

wcui
14-Alexandrite
(To:George_B)

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

George_B
6-Contributor
(To:wcui)

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
14-Alexandrite
(To:George_B)

[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
3-Visitor
(To:wcui)

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

Announcements