This is a migrated thread and some comments may be shown as answers.

GridDateTimeColumn filters cause scrolling issue in Chrome

2 Answers 116 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Vlad asked on 09 Nov 2017, 07:43 AM

ie---ok.png

chrome-issue.png

Hello!

When I have many columns of type GridDateTimeColumn in a grid with AllowFilteringByColumn="true", the Chrome shows the horizontal scroll bar for the whole browser window in addition to the grid’s scroll bar (please see the code and the attached screenshot below).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Test</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" PersistenceMode="Cookie" ShowChooser="false" EnableViewState="false" />

<telerik:RadGrid ID="RadGrid1"

runat="server" Width="100%" AutoGenerateColumns="False" CellSpacing="0" GridLines="Vertical" EnableLinqExpressions="false"

AllowFilteringByColumn="true" OnNeedDataSource="RadGrid1_NeedDataSource">

<MasterTableView Width="100%" AllowSorting="true">

<Columns>

<telerik:GridDateTimeColumn HeaderText="Column 1" UniqueName="C1" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 2" UniqueName="C2" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 3" UniqueName="C3" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 4" UniqueName="C4" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 5" UniqueName="C5" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 6" UniqueName="C6" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 7" UniqueName="C7" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 8" UniqueName="C8" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 9" UniqueName="C9" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 10" UniqueName="C10" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 11" UniqueName="C11" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 12" UniqueName="C12" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 13" UniqueName="C13" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 14" UniqueName="C14" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 15" UniqueName="C15" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 16" UniqueName="C16" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 17" UniqueName="C17" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 18" UniqueName="C18" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

<telerik:GridDateTimeColumn HeaderText="Column 19" UniqueName="C19" DataField="C1" HeaderStyle-Width="150px" FilterControlWidth="100px" />

</Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="180" />

<Resizing AllowResizeToFit="true" AllowColumnResize="true" />

</ClientSettings>

</telerik:RadGrid>

</form>

</body>

</html>

using System;

using System.Data;

using Telerik.Web.UI;

namespace Test

{

public partial class Test : System.Web.UI.Page

{

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = new DataTable();

}

If I change FilterControlWidth from “100px” to "100%" it does not help.

If I replace GridDateTimeColumn with GridBoundColumn, or if I set AllowFilteringByColumn="false", the concerned scroll bar disappears.

There is no scroll bar in Internet Explorer 11 and Firefox, but it is shown in Chrome and Opera.

Telerik.Web.UI version is 2017.2.711.45.

So, could you please advise me how to get rid of that scroll bar in the browser window?

Thank you!

2 Answers, 1 is accepted

answered on 17 Nov 2017, 05:23 PM

Hello!

Well, it seems the issue is caused by the invisible input of class "rdfd_" within the RadPicker implementation and the following style:

@media screen and (-webkit-min-device-pixel-ratio: 0) {

.rdfd_ {

position: absolute;

}

The following workaround (in the application styles) fixes the issue:

@media screen and (-webkit-min-device-pixel-ratio: 0) {

input.rdfd_ {

position: static !important;

}

Could you please confirm that it is safe and won't cause other issues?

Thank you!