Grid Theme

[Nathan]

Hi,

We just upgraded to the new version of Kendo and are struggling a bit with the new themes. FYI we're using the kendo.silver theme.

The grid works fine in general, but the filter icon seems to want to take up way more space than necessary; the column title is often truncated and then 3 dots added to show that there's more. It's hard to explain but see the attached screenshot. The column name is actually "ID" which should easily fit in the space, but you have to make the column really wide for some reason to get it to show otherwise it displays as "I...".

I tried to edit the CSS manually (I did find a large margin in "k-with-icon") but I'm not good with CSS and only made things worse - the column title went on a separate line from the filter icon. Anyone have ideas on how I can fix this? I really don't want to have to go edit every page in our system to increase the column widths; they looked perfect with the old styles.

Thanks!

Nathan

[Curt Rabon]

Just add a couple of CSS rules to your app's CSS to act as "overrides" to Kendo.  Make sure that your app's CSS file is included in the page AFTER the Kendo CSS is brought in.

The filter icon itself has a large amount of left/right padding in most themes.  To slim this down, you add make the left/right padding smaller only, and preserve the top/bottom padding (which makes the header cell somewhat tall), or you can make the padding the same on all sides, which is what the themes currently do.  To just make the left/right smaller, which will push the icon further to the right and give more room to the header text, use the following CSS (the default left/right for many themes is 10px):

.k-grid-header .k-grid-filter {
   padding-left: 5px;
   padding-right: 5px;

}

 

Another problem, is that many themes have a large amount of padding to the left of the header text, leaving less room for the word(s).  To solve this, add this CSS rule (adjust the 8px to your liking):

.k-grid-header th.k-header {

   padding-left: 8px;

}

 

[Nathan]

Thanks Curt!

The specific code you posted didn't quite fix it for me, but it put me on the right track. I really didn't want to edit the original Kendo styles, so the override method is great. Although I have a new file to reference in all projects I'd still prefer that over a column width change to every grid.

After spending some time in the DOM explorer, putting some borders around the actual title and the filter icon, etc. (sigh) I found that there was still a big space between the filter icon and the text: the k-link had a right margin of 18 that I cranked down to 10 (anything below 9 starts to wrap).

Here's the final CSS in case it helps someone else. See the attached image for the result which now looks much more like the original screen!

.k-grid-header .k-grid-filter {
   padding-left: 0px;
   padding-right:0px;
}

th.k-header {
   padding-left: 0px;
   padding-right: 0px;
}

.k-grid-header th.k-header > .k-link {
    /*text-overflow: clip;*/
    padding-right: 0px;
}

.k-grid-header th.k-with-icon .k-link {
    margin-right: 10px;
}