I have a grid that is wider than the page. It scrolls fine, but the bottom part of the data border get's cut off where the page ends in FF. I have screen shots below.
http://www.intellicominc.com/temp/first.png
http://www.intellicominc.com/temp/second.png
Here is my master page
<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %>
<%@ 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 runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="Stylesheet" type="text/css" href="Main.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<a href="~/admin/Default.aspx" runat="server">
<img src="~/images/logo.jpg" style="border: none;" runat="server" /></a>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div style="float: right; right: 20px; top: 10px; position: absolute;">
<asp:LoginStatus runat="server"></asp:LoginStatus>
</div>
</div>
<div id="Main">
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"
LiveResize="true" Height="520px">
<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="None"
BorderStyle="None" BorderSize="0">
<telerik:RadSplitter ID="radsplitter2" runat="server" Orientation="Horizontal" LiveResize="true">
<telerik:RadPane ID="RadPane2" runat="server" Width="220px" Scrolling="None" BorderStyle="None"
bordersize="0">
<telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="FullExpandedItem" Height="100%">
<Items>
<telerik:RadPanelItem Text="Customers" Expanded="True">
<Items>
<telerik:RadPanelItem Text="Add Customer" NavigateUrl="~/Customers/AddCustomer.aspx" />
<telerik:RadPanelItem Text="Customer List" NavigateUrl="~/Customers/CustomerList.aspx" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Calendar">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadCalendar runat="server" ID="Calendar1" Style="margin: 6px auto 0" />
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Contacts">
<Items>
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="My Contacts" />
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Address Cards" />
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Phone List" />
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Shared Contacts" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Tasks">
<Items>
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="My Tasks" />
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Shared Tasks" />
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Active Tasks" />
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Completed Tasks" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Notes">
<Items>
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="My Notes" />
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Notes List" />
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Shared Notes" />
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Archive" />
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="true"
ForeColor='Green' />
<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
BorderStyle="None" BorderSize="0">
<asp:ContentPlaceHolder ID="mainContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
</form>
</body>
</html>
Here is the css
body {
}
#header{
width: 100%;
height: 114px;
}
.leftMenu{
width: 280px;
height: 100%;
}
#main{
height: 800px;
}
.inputTableWidth{
width: 375px;
}
.rightPanelPadding{
margin-top: 10px;
margin-left: 10px;
width: 100%;
}
And here is the page in question, just databind the grid with enough columns to make it scroll
<%@ Page Title="" Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false" CodeFile="CustomerList.aspx.vb" Inherits="Customers_CustomerList" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceHolder" Runat="Server">
<telerik:RadGrid ID="RadGrid1" runat="server"
GridLines="None" AllowPaging="True" AllowFilteringByColumn="True"
AllowSorting="True" AutoGenerateColumns="false">
<MasterTableView DataKeyNames="CustomerId" AutoGenerateColumns="false">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
UniqueName="FirstName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
UniqueName="LastName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Business Name" HeaderText="Business Name" SortExpression="Business Name"
UniqueName="Business Name">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="State" HeaderText="State" SortExpression="State"
UniqueName="State">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Zip" HeaderText="Zip" SortExpression="Zip" UniqueName="Zip">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address"
UniqueName="Address">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City"
UniqueName="City">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" SortExpression="Phone"
UniqueName="Phone">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Fax" HeaderText="Fax" SortExpression="Fax" UniqueName="Fax">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Email" HeaderText="Email" SortExpression="Email"
UniqueName="Email">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CellPhone" HeaderText="CellPhone" SortExpression="CellPhone"
UniqueName="CellPhone">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Edit" HeaderText="<a href='test'>test</a>" >
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</asp:Content>
http://www.intellicominc.com/temp/first.png
http://www.intellicominc.com/temp/second.png
Here is my master page
<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %>
<%@ 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 runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="Stylesheet" type="text/css" href="Main.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<a href="~/admin/Default.aspx" runat="server">
<img src="~/images/logo.jpg" style="border: none;" runat="server" /></a>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div style="float: right; right: 20px; top: 10px; position: absolute;">
<asp:LoginStatus runat="server"></asp:LoginStatus>
</div>
</div>
<div id="Main">
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"
LiveResize="true" Height="520px">
<telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="None"
BorderStyle="None" BorderSize="0">
<telerik:RadSplitter ID="radsplitter2" runat="server" Orientation="Horizontal" LiveResize="true">
<telerik:RadPane ID="RadPane2" runat="server" Width="220px" Scrolling="None" BorderStyle="None"
bordersize="0">
<telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="FullExpandedItem" Height="100%">
<Items>
<telerik:RadPanelItem Text="Customers" Expanded="True">
<Items>
<telerik:RadPanelItem Text="Add Customer" NavigateUrl="~/Customers/AddCustomer.aspx" />
<telerik:RadPanelItem Text="Customer List" NavigateUrl="~/Customers/CustomerList.aspx" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Calendar">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadCalendar runat="server" ID="Calendar1" Style="margin: 6px auto 0" />
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Contacts">
<Items>
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="My Contacts" />
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Address Cards" />
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Phone List" />
<telerik:RadPanelItem ImageUrl="Img/contactsItems.gif" Text="Shared Contacts" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Tasks">
<Items>
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="My Tasks" />
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Shared Tasks" />
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Active Tasks" />
<telerik:RadPanelItem ImageUrl="Img/tasksItems.gif" Text="Completed Tasks" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Notes">
<Items>
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="My Notes" />
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Notes List" />
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Shared Notes" />
<telerik:RadPanelItem ImageUrl="Img/notesItems.gif" Text="Archive" />
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="true"
ForeColor='Green' />
<telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
BorderStyle="None" BorderSize="0">
<asp:ContentPlaceHolder ID="mainContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</telerik:RadPane>
</telerik:RadSplitter>
</div>
</form>
</body>
</html>
body {
}
#header{
width: 100%;
height: 114px;
}
.leftMenu{
width: 280px;
height: 100%;
}
#main{
height: 800px;
}
.inputTableWidth{
width: 375px;
}
.rightPanelPadding{
margin-top: 10px;
margin-left: 10px;
width: 100%;
}
And here is the page in question, just databind the grid with enough columns to make it scroll
<%@ Page Title="" Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false" CodeFile="CustomerList.aspx.vb" Inherits="Customers_CustomerList" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceHolder" Runat="Server">
<telerik:RadGrid ID="RadGrid1" runat="server"
GridLines="None" AllowPaging="True" AllowFilteringByColumn="True"
AllowSorting="True" AutoGenerateColumns="false">
<MasterTableView DataKeyNames="CustomerId" AutoGenerateColumns="false">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
UniqueName="FirstName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
UniqueName="LastName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Business Name" HeaderText="Business Name" SortExpression="Business Name"
UniqueName="Business Name">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="State" HeaderText="State" SortExpression="State"
UniqueName="State">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Zip" HeaderText="Zip" SortExpression="Zip" UniqueName="Zip">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address"
UniqueName="Address">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City"
UniqueName="City">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" SortExpression="Phone"
UniqueName="Phone">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Fax" HeaderText="Fax" SortExpression="Fax" UniqueName="Fax">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Email" HeaderText="Email" SortExpression="Email"
UniqueName="Email">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CellPhone" HeaderText="CellPhone" SortExpression="CellPhone"
UniqueName="CellPhone">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Edit" HeaderText="<a href='test'>test</a>" >
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</asp:Content>