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

Grid header doesn't do ellipsis on text overflow

4 Answers 386 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Felipe
Top achievements
Rank 1
Felipe asked on 08 Oct 2013, 04:11 PM
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. 

4 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 09 Oct 2013, 04:12 PM
Hi Felipe,

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{
    overflowhidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
Regards,
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
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.
0
Mike
Top achievements
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:

.k-grid-header th a {
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}
(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

0
Iliana Nikolova
Telerik team
answered on 07 Jan 2014, 12:58 PM
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:
Copy Code
<style>
.k-grid-header th a {
    overflowhidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}
 
.k-grid-header .k-filterable .k-link {
    padding-right0;
}
 
.k-grid-header .k-header .k-link{
    margin0;
    padding0;
}
</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!
Tags
Grid
Asked by
Felipe
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Felipe
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Share this question
or