For some reason the grid column headers have started to size larger than the default. I just commented out any styles for the grids in this application that I declared overriding the default and the issue remains.
I can use this style to change the background color but the height has no effect :
.k-grid-header .k-header
{
background-color: red;
height:20px;
}
Please see attached.
9 Answers, 1 is accepted
The header row of the grid can be modified by using a stronger CSS selector:
<style> div.k-grid-header thead th.k-header { height:20px; }</style>However, I suspect that the issue still might come from custom CSS styles which interfere with the default ones. Can you share additional information under what condition do the cells change height?
It would be great if you can isolate the issue in a runnable sample project and send it to me. This would provide me the opportunity to investigate the case locally and get back to you with an accurate suggestion.
Kind regards,
Tsvetomir
Progress Telerik
Rank 2
Hi Tsvetomir,
I just realized this is a browser specific issue. I was debugging using Edge and the problem was there. yet in Chrome they display normally.
Other inconsistencies include the fonts in the header of the page displayed in Chrome are bold yet in Edge and IE are not.
Also the column sizes in the grid when the page is displayed in Chrome are not the same as IE or Edge.
Is there documentation that addresses this?
Here is how I am setting column widths which seems to work in Chrome when the window is sized.
columns.Bound(a => a.Zener.PD).Width(105).Title("PD").Locked(true).HtmlAttributes( new {@style="max-width:105px;width:105px" });
With that said I am not sure if the HtmlAttributes code above (in bold) is needed.
Thanks
When the Width setting of the column is in use, it is not needed to explicitly add additional CSS styles via the HtmlAttributes. As per the problem in hand, I have conducted several tests and the grid's behavior is consistent over the browsers of interest.
In order for me to provide suggestions on how to cope with the issue, I would need to reproduce it locally. I have attached a sample project where I attempted to replicate the behavior. Would you modify the project in a way that the issue is reproduced and send it back?
In the meantime, what I can think of as a possible cause is when the headers' text is not wrapped and it takes up more vertical space, it would result in the resizing for all other cells. Can you ensure that there are not any CSS rules that interfere with the default wrapping of the text in the cells?
Regards,
Tsvetomir
Progress Telerik
Rank 2
Tsvetomir,
The style override you suggest does not effect the result in Edge. Again Chrome displays fine.
I tried attached a file that captures all the styles rendering from the Edge Development Tools - Elements tab for the div (1 column header). If you can spot the issue that would be great. Included at the top is the rendered markup.
I tried but this site would not accept a 3kb text file . So I am pasting it below.
<th class="k-header k-sorted" id="67e31dc0-9f47-413b-915a-fbc8fc288574" role="columnheader" aria-haspopup="true" aria-label="Product Press ctrl + space to group" aria-sort="ascending" rowspan="1" scope="col" data-role="columnsorter" data-title="Product" data-index="0" data-field="ProductRoot.Name" data-dir="asc"><a class="k-link" href="#">Product<span class="k-icon k-i-sort-asc-sm"></span></a></th>
Inline style{
text-align
left;
}
kendo.co....min.css (2326)
.k-filter-row > th:first-child, .k-grid tbody td:first-child, .k-grid tfoot td:first-child, .k-grid-header th:first-child.k-header{
border-left-width
:
0px;
}
ZenerDiodes (11413)
div.k-grid-header thead th.k-header{
height20px;
}
kendo.co....min.css (12917)
.k-grid-header th.k-header{
padding-left
:
1.28em;
}
kendo.co....min.css (12914)
.k-filter-row th, .k-grid-header th.k-header{
padding
:
.786em .6em;
}
kendo.co....min.css (2121)
.k-grid-header th.k-header{
vertical-align
:
bottom;
}
kendo.co....min.css (2111)
.k-filter-row th, .k-grid-header th.k-header{
overflow
:
hidden;
border-style
:
solid;
border-width
:
0 0 1px 1px;
padding
:
.5em .6em .4em .6em;
font-weight
:
400;
white-space
:
nowrap;
text-overflow
:
ellipsis;
text-align
:
left;
}
kendo.ma....min.css (2449)
.k-grid-header .k-header, .k-grid-header .k-header .k-link, .k-grid-header .k-link, .k-grid-header .k-link:link, .k-pager-info, .k-scheduler-agendaview .k-scheduler-datecolumn, .k-scheduler-header{
color
:
#999;
}
kendo.ma....min.css (2363)
.k-grid-footer, .k-grid-footer td, .k-grid-header, .k-grid-header .k-header, .k-pager-numbers .k-state-selected, .k-pager-wrap, .km-pane-wrapper .k-grid-header .k-header{
color
:
#444;
background-color
:
#fafafa;
}
mcc-wc.css (1725)
table td:first-of-type, table th:first-of-type{
padding-left
:
1px;
}
kendo.co....min.css (406)
.k-animation-container, .k-animation-container *, .k-animation-container ::after, .k-block .k-header, .k-dialog .k-window-content, .k-list-container, .k-widget, .k-widget *, .k-widget ::before{
box-sizing
:
content-box;
}
Thank you for the provided generated header cell element and the respective CSS. I checked it, and unfortunately, I am not able to understand what is causing the described issue.
I have noticed that the frozen column functionality of the grid is present. I have tried to replicate the issue with Locked columns, to no avail. Speaking of locked columns, they are a very delicate functionality which requires certain prerequisites to be implemented. More information on the functionality can be found here:
Locked Columns
I suspect the issue might stem from the locked columns, can you try to comment out all the relevant code and check if the issue is present?
Finally, it will help me a lot to provide assistance to the best of my knowledge if you can share a runnable example that I could test locally.
Best regards,
Tsvetomir
Progress Telerik
Rank 2
Thank you for the link, I will take a look at that. The reason I started using the "Locked" method is because I am tasked with getting these columns sized to the pixel. This is because of the unavoidable structure where there is a custom filter on the top of the template that comes from a partial view, so if you could imagine trying to size columns in one view to align with columns in another is tough.
And without the locking you size one column by setting the column width and then another and the first column moves. You end up going back and forth forever.
Based on the provided information, I assume that you would find the how-to article below helpful. It covers the topic of how to disable the resizing of a specific column. It is designed for the jQuery widgets, however, the logic is purely in JavaScript and it would not have any difference in the implementation for the ASP.NET Core wrappers.
https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/disable-column-resize-for-specific-columns
Best regards,
Tsvetomir
Progress Telerik
Rank 2
Thank you for that post. I have added the JQuery code and removed the Locked(true) from column definitions.
The result is fine when displaying in Chrome but the column widths show differently in Edge. (I have not tried other browsers)
Do you know why the same column width declarations react differently in Chrome than Edge?
Generally, there are browser specifics and certain functionalities are handled differently across the browsers. However, in order for me to provide accurate suggestions whether does the issue stem from, I would need the faulty behavior replicated locally.
Can you also try the application in all of the major browsers and let me know in case the issue is present anywhere else except in Microsoft Edge?
Kind regards,
Tsvetomir
Progress Telerik