RadGrid Resizes Width Incorrectly

[John]

Hi,

I have a page set up with a RadGrid that is sometimes set to the correct width when the page loads, but it is sometimes a little skinnier than it should be. Any post back and sometimes even a full page refresh makes the grid come back with the skinnier width.

Our site's width is 960px, and if I remove that, the grid doesn't have the issue (it looks like if the grid's parent element is explicitly set, the grid figures out how wide it should be--in this case, it seems to be figuring it out incorrectly sometimes?).

Notes:
    *the grid should be set to, and sometimes is set to, 1076px, but it is mostly re-sized to 1047px (a loss of 29px -- perhaps the width of the td's with class rgExpandCol, that trigger the detail table to bind?)

    *the container div with class="RadGrid" is the element whose width is being set

Any help would be much appreciated.

Thanks,

John

[Galin]

Hello John,

Can you confirm that you do not use custom CSS, which add additional dimension and styles like padding to the RadGrid setting? Also I recommend you to use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them is very easy to inspect the elements and to see the styles that they have.

Regards,
Galin
the Telerik team

[John]

Hey, sorry it took so long for me to get back. I think I found the issue. One of the columns in the grid is for phone numbers, and skype automatically puts in some html around any phone numbers it finds--pretty cool, but I assume it's put there on dom load, after the rad grid has calculated how wide it's going to be, which is what is causing the goofiness. I've attached an image with the column at the end of the grid.

Also, here is the html it creates around the number.

<span class="skype_pnh_print_container_1315489964">[NUMBER]</span>
  <span class="skype_pnh_container" dir="ltr" tabindex="-1">
  <span class="skype_pnh_mark"></span>
</span>

...and the CSS it puts in...

<style charset="utf-8" type="text/css" id="D82CB4C7-16D8-4F07-8A5B-87A477EE7D82" rel="stylesheet">
SPAN.skype_pnh_container SPAN.skype_pnh_mark{  display:none !important;}@media screen{SPAN.skype_pnh_print_container_1315489964{  display:none !important;}SPAN.skype_pnh_container, SPAN.skype_pnh_container *{background-attachment: scroll !important;background-color: transparent !important;background-image: none !important;background-position: 0px 0px ! important;background-repeat: no-repeat !important;border: 0px none !important;border-color: #000000 !important;border-style: none !important;border-width: 0 !important;border-left: 0 none #000000 !important;border-top: 0 none #000000 !important;border-right: 0 none #000000 !important;border-bottom: 0 none #000000 !important;border-left-color: #000000 !important;border-left-style: none !important;border-left-width: 0 !important;border-top-color: #000000 !important;border-top-style: none !important;border-top-width: 0 !important;border-right-color: #000000 !important;border-right-style: none !important;border-right-width: 0 !important;border-bottom-color: #000000 !important;border-bottom-style: none !important;border-bottom-width: 0 !important;border-collapse: separate !important;bottom: auto !important;clear: none !important;clip: auto !important;cursor: pointer !important;direction: ltr !important;display: inline !important;float: none !important;font-style: normal !important;left: auto !important;letter-spacing: 0 !important;list-style-image: none !important;list-style-position: outside !important;list-style-type: disc !important;overflow: hidden !important;overflow-x: hidden !important;overflow-y: hidden !important;padding: 0px 0px 0px 0px !important;padding-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;page-break-after: auto !important;page-break-before: auto !important;page-break-inside: auto !important;position: static !important;right: auto !important;table-layout: auto !important;text-align: left !important;text-decoration: none !important;text-indent: 0px !important;text-transform: none !important;top: auto !important;voice-family: inherit !important;white-space: nowrap !important;word-spacing: normal !important;z-index: 0 !important;  color: #49535A !important;  font-family: Tahoma, Arial, Helvetica, sans-serif !important;  font-size: 11px !important;  font-weight: bold !important;  height: 14px !important;  line-height: 14px !important;  margin-left: 0px !important;  margin-top: 0px !important;  margin-right: 0px !important;  margin-bottom: 0px !important;  vertical-align: baseline !important;  width: auto !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_fax SPAN.skype_pnh_right_span, SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_fax SPAN.skype_pnh_right_span{  background-position: -92px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_dropart_flag_span{  background-position: 0px 1px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_textarea_span{  background-position: -90px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_text_span{  visibility: hidden !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free SPAN.skype_pnh_dropart_flag_span{  background-position: 0px 1px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free SPAN.skype_pnh_textarea_span{  background-position: -160px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free SPAN.skype_pnh_text_span{  background-position: -160px 0px !important;  color: #FFFFFF !important;}SPAN.skype_pnh_container SPAN.skype_pnh_left_span{  background-position: 0px 0px !important;  width: 6px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_span{  background-position: -11px 0px !important;  width: 27px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_wo_arrow_span{  background-position: -130px 0px !important;  width: 18px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_flag_span{  background-position: 1px 1px !important;  width: 18px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_textarea_span{  background-position: -125px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_text_span{  padding-left: 5px !important;  background-position: -125px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_right_span{  background-position: -62px 0px !important;  width: 15px !important;}}@media print{SPAN.skype_pnh_print_container_1315489964{}SPAN.skype_pnh_container{    display:none !important;}}@media screen{SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_common *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_inactive_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_common *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_active_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_fax *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_inactive_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_fax *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_active_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_text_span{  background-image: none !important;  color: transparent !important;  visibility: visible !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free *{  background-image:url('chrome://skype_ff_extension/skin/numbers_free_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free *{  background-image:url('chrome://skype_ff_extension/skin/numbers_free_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_flag_span{  background-image: url('chrome://skype_ff_extension/skin/flags.gif') !important;}}
</style>

[John]

Here is a simple example page that shows the issue. Note that (in ff4, at least, and I assume you have to have skype installed on your machine) the following phone number will show up decorated with the skype html and css: 612.867.5309 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridWidthIssue.aspx.cs" Inherits="GridWidthIssue" %>

<!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>NO SKYPE! DON'T DO IT!</title>
    <style type="text/css">
        #content
        {
            background-color:#555;
            width:200px;
            height:500px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="content" class="container_12">
            <telerik:RadScriptManager runat="server" />
            <telerik:RadGrid runat="server" Skin="Web20" EnableEmbeddedSkins="true" ID="radgrid" OnNeedDataSource="radgrid_NeedDataSource" />
        </div>
    </form>
</body>
</html>

CODE BEHIND:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class GridWidthIssue : System.Web.UI.Page
{
    protected void radgrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        List<Gargoyle> gargoyles = new List<Gargoyle>(){
            new Gargoyle(){ Name = "Steve", WingSpan = 500, NumberOfVillagesDestroyed = 16, Phone = "612.123.4567" },
            new Gargoyle(){ Name = "Rick", WingSpan = 600, NumberOfVillagesDestroyed = 160, Phone = "612.867.5309" },
        };
        radgrid.DataSource = gargoyles;
    }
}

public class Gargoyle
{
    public string Name { get; set; }
    public double WingSpan { get; set; }
    public int NumberOfVillagesDestroyed { get; set; }
    public string Phone { get; set; }
}

[Galin]

Hello John,

Thank you for sending the simple example page.

The problem is that the Skype Plugin highlights the telephone numbers after rendering the RadGrid. For that reason the RadControl does not correctly calculated their widths. Therefore the option here is to repaint the RadGrid after this event.

 Also you can disable the highlighting with the following meta tag:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Place it in the header tag of the page.

And finally, the last option is to set fixed width of the column with telephone numbers.

I hope this helps.

Regards,
Galin
the Telerik team

[John]

That definitely helped. Thanks a bunch.