Clumns in DataGrid are not alligned

When a scrollbar appears in the DataGrid control columns are not aligned anymore:

My RadzenGrid component is specified the following way:

<RadzenGrid TItem="TItem" AllowFiltering="true" AllowPaging="true" PageSize="100"  AllowSorting="true"
            Responsive="true" RowSelect="@(IsSelectable ? OnRowSelect : null)"
            Data="@Data" Value="@Value"
            FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
            RowCreate="@RowCreate" RowUpdate="@RowUpdate" EditMode="DataGridEditMode.Single"
            RowClick="@RowClick"
            Columns="@Columns"
            Style="height:50vh;"
            @ref="myGrid" />

If possible, could you please provide a fix or a workaround?

Not sure how and where to reproduce this - works normally on our demos. You can attach the source code to see why it's not working for you.

Here is a simple code to reproduce it:

<RadzenGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Simple"
            Data="@data" TItem="Employee"
            Style="height:400px;">
    <Columns>
        <RadzenGridColumn TItem="Employee" Property="Id" Title="ID" Width="10em" />
        <RadzenGridColumn TItem="Employee" Property="FirstName" Title="FirstName" />
        <RadzenGridColumn TItem="Employee" Property="LastName" Title="LastName" Width="20em" />
    </Columns>
</RadzenGrid>


@code {
    private class Employee
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

    List<Employee> data;

    protected override void OnInitialized()
    {
        data = new List<Employee>()
        {
            new Employee() { Id = 1, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 2, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 3, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 4, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 5, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 6, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 7, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 8, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 9, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 10, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 11, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 12, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 13, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 14, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 15, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 16, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 17, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 18, FirstName = "N1", LastName = "L1" },
            new Employee() { Id = 19, FirstName = "N1", LastName = "L1" },
        };
    }

}

(I am not sure if it is browser specific. Just in case, I am using the Chrome browser.)

Once the grid is displayed it looks ok. But when you grab the scrollbar and move it down the layout shifts and the alignment does not fit anymore.

Thank you very much for the support!

We fixed a similar issue some time ago. Are you using the latest version?

I am currently using v.3.1.6

I have just updated to v3.1.8 (the latest) and the issue is still reproducible.