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

Bug with RadGrid outside border in IE

3 Answers 167 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aaron Gibbs
Top achievements
Rank 2
Aaron Gibbs asked on 15 Jul 2008, 10:58 AM
The outside border for the RadGrid doesn't show up correctly in IE when the RadGrid is placed inside an HTML table cell (<TD>) with a specific width defined.  I'm using the Office2007 skin, but it appears to do this with any skin that uses a colored border around the outside of the RadGrid, and there are enough columns to make the RadGrid larger than the cell it is inside of.

The ASPX code is below, as well as a code-behind I have mocked up to illustrate the problem.  I am using IE7 on Windows Vista Ultimate x86.  I have been unable to reproduce the problem in FireFox, only IE7.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testbug.aspx.vb" Inherits="testbug" %> 
 
<%@ 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>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <table style="width:100%;">  
        <tr> 
            <td class="style2">  
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
                </asp:ScriptManager> 
            </td> 
            <td>&nbsp;</td> 
        </tr> 
        <tr> 
            <td width="400">  
                <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Office2007">  
                </telerik:RadGrid> 
            </td> 
            <td>&nbsp;</td> 
        </tr> 
    </table> 
    </form> 
</body> 
</html> 

Code-behind:

Partial Class testbug  
    Inherits System.Web.UI.Page  
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        Dim dt As New DataTable  
        Dim r As DataRow  
 
        dt.Columns.Add(New DataColumn("This_is_a_really_long_column_name", GetType(System.String)))  
        dt.Columns.Add(New DataColumn("This_is_another_really_long_one", GetType(System.String)))  
        dt.Columns.Add(New DataColumn("Here_is_another_long_one", GetType(System.String)))  
        dt.Columns.Add(New DataColumn("Boy_these_are_getting_long", GetType(System.String)))  
 
        r = dt.NewRow()  
        r(0) = "some texthere"  
        r(1) = "some more text"  
        r(2) = "here is even more"  
        r(3) = "finally last column"  
        dt.Rows.Add(r)  
 
        RadGrid1.DataSource = dt 
        RadGrid1.DataBind()  
    End Sub  
End Class 

Thank you for your attention!

3 Answers, 1 is accepted

Sort by
0
Aaron Gibbs
Top achievements
Rank 2
answered on 15 Jul 2008, 11:28 AM
Here is a screenshot of my machine when running the code sample above:

http://www.my-dns.net/pics/screenshot.jpg

Note that the outside RadGrid border is actually cutting through the middle of the RadGrid, exactly at the postiion where the <td> element surrounding the RadGrid would be.
0
Dimo
Telerik team
answered on 15 Jul 2008, 11:49 AM
Hello Aaron,

Thank you for the screenshot and code snippet.

The observed visual glitch is expected in this case and it is caused by browser behavior and the browser's implementation of the CSS standards.

This is what happens actually:

RadGrid has a default width of "100%", which is applied to the control's wrapper, which is a <div> element. The <table> element inside has also a default width of "100%", however, tables can expand horizontally to enclose their content, while <div>s do not expand horizontally. As a result, the <table> overflows out of the <div>.

Possible workarounds are:

1) Place RadGrid in a wider table cell.
2) Set an adequate width for RadGrid in pixels.
3) Remove RadGrid's border like this:

<telerik:RadGrid   style="border:0"   />


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Aaron Gibbs
Top achievements
Rank 2
answered on 15 Jul 2008, 03:51 PM
Thanks for the response and explanation.

Unfortunately due to the way the site layout is setup, and the MasterPage surrounding the control, I cannot easily change the table cell width.  Also since this RadGrid is using auto-generated columns (the user selects which columns to display) setting a static width to the RadGrid won't work either.

Ahhh . . . nevermind, I just found another solution. The following code solved my problem and "tricked" IE into displaying this correctly.  Inside of the <td> with a fixed width, I placed another <table> and <td> with a "width=100%"

Thanks again for the explanation!

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testbug.aspx.vb" Inherits="testbug" %> 
 
<%@ 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>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <table style="width:100%;">  
        <tr> 
            <td class="style2">  
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
                </asp:ScriptManager> 
            </td> 
            <td>&nbsp;</td> 
        </tr> 
        <tr> 
            <td width="400">  
                <table width="100%">  
                    <tr> 
                        <td width="100%">  
                            <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Office2007">  
                            </telerik:RadGrid> 
                        </td> 
                    </tr> 
                </table> 
            </td> 
            <td>&nbsp;</td> 
        </tr> 
    </table> 
    </form> 
</body> 
</html> 
 
Tags
Grid
Asked by
Aaron Gibbs
Top achievements
Rank 2
Answers by
Aaron Gibbs
Top achievements
Rank 2
Dimo
Telerik team
Share this question
or