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.

Hi Reid,

The header row of the grid can be modified by using a stronger CSS selector:


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

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.

 

With that said I am not sure if the HtmlAttributes code above (in bold) is needed.

Thanks

 

 

 

Hi Reid,

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

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 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.

 

Hi Reid,

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

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?

Hi Reid,

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