This is a migrated thread and some comments may be shown as answers.

Left-aligned sort icons

5 Answers 215 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sebastian
Top achievements
Rank 1
Sebastian asked on 23 Feb 2016, 02:26 PM

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

5 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 23 Feb 2016, 03:41 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sebastian
Top achievements
Rank 1
answered on 23 Feb 2016, 04:01 PM

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

0
Magdalena
Telerik team
answered on 24 Feb 2016, 08:58 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sebastian
Top achievements
Rank 1
answered on 24 Feb 2016, 10:57 AM

Thank you! Your solution worked for me.

 

Regards,

Sebastian

0
Jeffrey
Top achievements
Rank 1
Veteran
answered on 06 Sep 2019, 02:43 AM

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:

 

Tags
Grid
Asked by
Sebastian
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Sebastian
Top achievements
Rank 1
Jeffrey
Top achievements
Rank 1
Veteran
Share this question
or