Completed
Last Updated: 28 Oct 2019 12:25 by ADMIN
YC
Created on: 28 Oct 2019 12:15
Category: Grid
Type: Bug Report
0
Grid in Classic RenderMode has GroupPanel Height Problem in the latest Chrome v78

Hello, 

There is an issue with Classic render mode Grid when grouping is enabled. The width of the grouping is incorrect and some of the icons are wrapped on the next row.

1 comment
ADMIN
Peter Milchev
Posted on: 28 Oct 2019 12:22

Hello YC,

Thank you for bringing this issue to our attention. 

It seems that Google Chrome introduced yet another regression regarding the table styling as the same problem is replicated with the following pure HTML snippet:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>

    <table>

        <tbody>
            <tr>
                <th scope="col" style="white-space: nowrap;">
                    OrderDate&nbsp;
                    <input type="submit" value=" ">&nbsp;
                    <input type="submit" value=" ">
                </th>
                <td style="width: 100%;"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

The good news is that the issue is not replicated in Google Chrome Canary, which is 2 versions ahead of Google Chrome(i.e. if Google Chrome is v78, Google Chrome Canary will be equivalent to v80). That means in a few weeks the problem will be gone once Google Chrome is updated to v80.

Meanwhile, you can use one of the following approaches:

1) Migrate to the supported and new Lightweight render mode:

2) Use the following CSS style that is applied only for Google Chrome versions v78 and v79:

<style>
    .t-chrome78 .RadGrid table.rgGroupPanel table th.rgGroupItem,
    .t-chrome79 .RadGrid table.rgGroupPanel table th.rgGroupItem{
        display:-webkit-box;
    }
</style>

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.