Left-aligned sort icons

[Sebastian]

Hello,

I have the requirement to move the sort icon (arrow) to the left before the column heading. The reason is because if the column size is to small, the arrow is not visible for the user. We are not able - and willing - to hard code all table widths so the only solution is to change the display of the filter. Is there a way of moving the icon to the left, before the text, so that it is visible even if the column size is smaller than the column heading?

 

Regards

Sebastian

[Magdalena]

Hi Sebastian,

The following CSS will be moved the icon to the left:

.k-grid-header th>.k-link>.k-icon {
    float: left;
}

Regards,
Magdalena
Telerik

 

 

[Sebastian]

Hello Magdalena,

I also tried a similar solution (I only tested in Firefox v.44.0.2). Your solution works fine in Chrome and Internet Explorer but not in Firefox. Our application must also run in Firefox.

Do you have another idea?

 

Regards,

Sebastian

[Magdalena]

Hello Sebastian,

The following solution works properly cross browsers:

.k-grid-header th.k-header {
    position: relative;
}

.k-grid-header th > .k-link > .k-icon {
    position: absolute;
    top: 11px;
    left: 2px;
}

Regards,
Magdalena
Telerik

 

 

[Sebastian]

Thank you! Your solution worked for me.

 

Regards,

Sebastian

[Jeffrey]

Hello,

The above does not really work to well.  Try this post:

 

https://github.com/telerik/kendo-themes/issues/410

/* sort icon color */
.k-grid-header .k-header > .k-link > .k-icon:before {
    color: #f2b661;
}
/* sort order number color */
.k-grid-header .k-header > .k-link > span.k-sort-order {
    color: #f2b661;
}

/* move sort icon and number to left and shift text right to make room for them when a column is sorted */
.k-grid-header th.k-header.k-sorted > .k-link {
    position: relative;
    padding-left: 18px;
}
.k-grid-header .k-header.k-sorted > .k-link > .k-icon.k-i-sort-asc-sm,
.k-grid-header .k-header.k-sorted > .k-link > .k-icon.k-i-sort-desc-sm {
    position: absolute;
    top: 7px;
    left: -12px;
}
.k-grid-header .k-header.k-sorted > .k-link > .k-sort-order {
    position: absolute;
    top: 6px;
    left: 10px;
}

Answer: