RadTextBox width changes on hover when decorated with RadFormDecorator (Q3 2011)

[Miran]

I have a page with an edit form on it and this has some RadTextBox and RadNumericTextBox controls. The page uses a master page that has a RadFormDecorator declared on it and is set to decorate Textbox controls. RadTextBox controls are set to a width of 300px.
The problem i have noticed is that when the page loads and i click a button to show me a edit form (the edit form is set to visible = true) all the RadTextBox controls have a width set to 294px but when i hover over a control its width is resets to 300px. All this makes the form look bad because every time the user hovers over any of the RadTextBox controls it changes its size and changes the look of the form.
All this only hapend if the page uses AJAX to update controls.

If i include an ASP Textbox control on the page an set its width in markup to 300px it renders as 294px when i open my form but it doesn't suffer from the same resizing on hover as the RadTextBox does.

If i change the RadFormDecorator not to decorate Textbox controls the problem goes away and all the TextBox controls are rendered with a width of 300px.
As said the problem appeared when upgrading to Q3 2011 release. If i go back to using Q2 2011 release the problem goes away.

[Rumen]

Hi Miran,

Thank you for reporting this bug.

It was verified and logged for fixing in our bug tracking system. Here you can find the PITS Issue: Public URL.We do appreciate your feedback and I updated your Telerik points.

Please, excuse us for the temporary inconvenience.

Best wishes,
Rumen
the Telerik team

[Niko]

Hello Miran,

For the time being you can incorporate the following workaround in the RadFormDecorator, for the issue you are experiencing.

var oldIsApplicableToUnifyWidth = Telerik.Web.UI.RadFormDecorator.prototype.isApplicableToUnifyWidth;
Telerik.Web.UI.RadFormDecorator.prototype.isApplicableToUnifyWidth = function(element)
{
    return oldIsApplicableToUnifyWidth.apply(this, arguments) && (!this.ancestorWithCssClass(element, "RadInput"));
};
Telerik.Web.UI.RadFormDecorator.prototype.ancestorWithCssClass = function(element, className)
{
    var parent = element.parentNode;
    while(parent.tagName)
    {
        if(Sys.UI.DomElement.containsCssClass(parent, className))
            return parent;

        parent = parent.parentNode;
    }

    return null;
};

Hope this helps.


All the best,
Niko
the Telerik team

[Josep]

Hi,

I tried the solution of the las post and the solution worked on development computer. When I've publised the project on the server, the problem appears again. The code is the same on delevelopment computer and on the server but on the server the solution doesn't work. How can I solve this problem on the server?

Thanks in advance.

[Niko]

Hi Miran,

Could you, please, provide a live URL for your published web site? Certainly this cannot be an issue in the code, but rather in the setup or configuration.

All the best,
Niko
the Telerik team

[Josep]

Hi Niko,

The problem is with internet explorer 9 and compatibility view. I had the compatibility view checked for intranet and that was the problem. I've uncheck the compatibility view and now works fine.

Thank you very much for your quick response.