Hi,
I'm trying to set up the grid header to do text ellipsis [Column Ti...] when the content of the header exceeds the column width.
However as you can see in the attachments, when I set the text span style as:
overflow:hidden;
text-overflow:ellipsis
The grid header wraps in multiline (the first line contains the filter icon, and the next one the header text)
I am wondering how can I achieve the appearance as in expected.png where the text does ellipsis and the filter icon remains in the same line.
Could you please shed a light with this issue?
Thanks,
Felipe.
I'm trying to set up the grid header to do text ellipsis [Column Ti...] when the content of the header exceeds the column width.
However as you can see in the attachments, when I set the text span style as:
overflow:hidden;
text-overflow:ellipsis
The grid header wraps in multiline (the first line contains the filter icon, and the next one the header text)
I am wondering how can I achieve the appearance as in expected.png where the text does ellipsis and the filter icon remains in the same line.
Could you please shed a light with this issue?
Thanks,
Felipe.
4 Answers, 1 is accepted
0
Accepted
Hi Felipe,
Regards,
Iliana Nikolova
Telerik
I have already answered to the same question in your other thread, however I am pasting my reply here too:
I believe the following CSS rule should help to achieve the expected result:
.k-grid-header th{ overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Felipe
Top achievements
Rank 1
Rank 1
answered on 09 Oct 2013, 04:24 PM
Sorry for the duplicate, this is the solution for the issue I had.
I'll mark this as answered for the community benefit.
Thanks!
-Felipe.
I'll mark this as answered for the community benefit.
Thanks!
-Felipe.
0
Mike
Top achievements
Rank 1
Rank 1
answered on 06 Jan 2014, 04:39 PM
There still seems to be a small issue with this. I have added the following to my CSS:
(notice that I had to add an 'a' selector for it to work.
Also it now seems to conflict with the drop down arrow for the column menu or filter. It spreads the contents over two lines, rather than just being on one.
Without the overflow:hidden line in the CSS it all fits on one line, but of course the ellipsis does not work.
Any help?
Cheers Mike
.k-grid-header th a { overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}Also it now seems to conflict with the drop down arrow for the column menu or filter. It spreads the contents over two lines, rather than just being on one.
Without the overflow:hidden line in the CSS it all fits on one line, but of course the ellipsis does not work.
Any help?
Cheers Mike
0
Hi Mike,
I already answered to the same question in you support ticket, however I am pasting my reply here too:
In order to achieve the expected result when filters / column menus are enabled you could add the following CSS rules:
Regards,
Iliana Nikolova
Telerik
I already answered to the same question in you support ticket, however I am pasting my reply here too:
In order to achieve the expected result when filters / column menus are enabled you could add the following CSS rules:
Copy Code
<style>.k-grid-header th a { overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}.k-grid-header .k-filterable .k-link { padding-right: 0;}.k-grid-header .k-header .k-link{ margin: 0; padding: 0;}</style>Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!