ListSortColumn on click - Arrows icon disappear

I have a ListSortColumn widget on a tablerecords, also the Css to have an arrow icon on the widget. However, when I click on the arrow icon it disappears. What is wrong on the behaviour of the icons?

Solution

Hello.

When you sort by a column, you change the class from "SortColumns_Sortable" to "SortColumns_Sorted".

The class "SortColumns_Sorted" doesn't have the same style for the arrows.

To solve this you should add that CSS to your class. Like this:

/* Sort */
.SortColumns_Sortable:after,
.SortColumns_Sorted:after {
    background-image: url(/MyApp/img/setas.png?5508) !important;
    background-repeat: no-repeat;
    content: "";
    margin-left: 10px;
    padding-left: 15px;
}

instead of:

/* Sort */
.SortColumns_Sortable:after {
    background-image: url(/MyApp/img/setas.png?5508) !important;
    background-repeat: no-repeat;
    content: "";
    margin-left: 10px;
    padding-left: 15px;
}


I think that this will fix it for you.
Please don't be afraid to report back if this doesn't work for you.

Solution