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

Grid height not adjust to100% when resize browser on IE 9

2 Answers 74 Views

Grid

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

wg asked on 02 Aug 2013, 03:27 AM

goodpage.jpg

badpage1.jpg

badpage2.jpg

IE: 9.0
Asp.net: 4.0
Telerik Version: 2013.1.403.40

Hi Telerik,

The page has just 1 RadGrid and which height is 100%, it works well but when I resize the browser from normal size to a smaller size, it gives me "Blank Area" on the bottom. Please take a look at attachments.

BTW: It works with FireFox and Chrome.

Thank you very much,
Bill

Html:

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

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head id="Head1" runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadGrid for ASP.NET AJAX</title>

<style type="text/css">

html {

overflow: auto;

}

html,

body,

form {

margin: 0;

height: 100%;

}

</style>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid

ID="RadGrid1"

runat="server"

DataSourceID="XmlDataSource1"

AllowPaging="true"

PageSize="40"

Width="100%"

Height="100%"

Style="border: 0; outline: none">

<MasterTableView TableLayout="Fixed" AllowFilteringByColumn="true" />

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

<PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />

</telerik:RadGrid>

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/datasource.xml" />

</form>

</body>

</html>

datasource.xml

<?xml version="1.0" encoding="utf-8" ?>

<students>

<student id="1" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" />

<student id="2" firstname="Mary" lastname="Andrew" suffixname="Sr" phone="704-717-0290" />

<student id="1" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" />

<student id="2" firstname="Mary" lastname="Andrew" suffixname="Sr" phone="704-717-0290" />

<student id="1" firstname="Cathy" lastname="Smith" suffixname="Jr" phone="704-717-0090" />

<student id="2" firstname="Mary" lastname="Andrew" suffixname="Sr" phone="704-717-0290" />

</students>

2 Answers, 1 is accepted

Accepted

answered on 06 Aug 2013, 03:37 PM

Hello Bill,

To avoid the described behavior in IE try setting overflow property to hidden instead of auto as shown below and let me know about the result:

<style type="text/css">

html

{

overflow: hidden;

}

html,

body,

form

{

margin: 0;

height: 100%;

}

</style>

Regards,
Pavlina
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.