Grid Column Header not aligning with data column on IE

3 posts, 0 answers
  1. Jessica
    Jessica avatar
    5 posts
    Member since:
    Mar 2018

    Posted 26 Mar 2018 Link to this post

    Hi,

     

    I'm having an issue with columns widths on Internet Explorer.

     

    This occurred when upgrading from 2017.1.223 to 2018.1.221.

     

    Changing the widths of columns on the razor code doesn't change anything in IE. If I render the page, then try to change the width by dragging the header cell, the columns align, but still don't take up the full width, like normal. I have attached a screenshot of the columns aligned after messing with them is called after-align.png

     

    I have attached screenshots of the grid in both Chrome and IE too. Again, the grid works in Chrome, but doesn't work in IE. Let me know if you need any more information!

     

    Thanks,

    Jessica

  2. Jessica
    Jessica avatar
    5 posts
    Member since:
    Mar 2018

    Posted 26 Mar 2018 Link to this post

    I have a temporary fix for this:

     

    Setting the width of ".k-grid-content" to initial forces the grid to 100% width, however, this only works whilst setting the width from the developer tools, after rendering the page. Setting this property from the CSS file doesn't work. (It isn't being overridden by another rule, it has top priority, but has a red line underneath).

     

    I hope this information helps with solving the issue.

     

    Thanks,

    Jessica

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 27 Mar 2018 Link to this post

    Hi Jessica,

    There can be misalignment observed in IE if it is running in Compatibility Mode. As this mode uses old rendering mechanism it is not supported and can cause unexpected results. Please ensure that Compatibility Mode is disabled. 

    In case the IE is running in standard mode please send us a dojo sample or a runnable project where the behavior is replicated. This will enable us to examine the issue locally and look for its cause.

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top