Bug with RadGrid outside border in IE

4 posts, 0 answers
  1. Aaron Gibbs
    Aaron Gibbs avatar
    23 posts
    Member since:
    Dec 2007

    Posted 15 Jul 2008 Link to this post

    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!
  2. Aaron Gibbs
    Aaron Gibbs avatar
    23 posts
    Member since:
    Dec 2007

    Posted 15 Jul 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Jul 2008 Link to this post

    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
  5. Aaron Gibbs
    Aaron Gibbs avatar
    23 posts
    Member since:
    Dec 2007

    Posted 15 Jul 2008 Link to this post

    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> 
     
Back to Top