Aaron Gibbs
Top achievements
Rank 2
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.
Code-behind:
Thank you for your attention!
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> </td> |
| </tr> |
| <tr> |
| <td width="400"> |
| <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Office2007"> |
| </telerik:RadGrid> |
| </td> |
| <td> </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
0
Aaron Gibbs
Top achievements
Rank 2
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.
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
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
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
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!
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> </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> </td> |
| </tr> |
| </table> |
| </form> |
| </body> |
| </html> |