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

RadTextBox resizes on hover

8 Answers 105 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 10 Jul 2009, 07:13 PM
Hi,

Is there a known reason why a RadTextBox would resize itself smaller by one pixel when the mouse moves over it?  This only happens the first time and then the box stays the same size until a refresh.

Also on IE7 there seems to be a 5 pixel right margin, I've tried changing the SPAN.RADINPUT, SPAN.RADINPUT_WEB20, INPUT.RITEXTBOX and INPUT.RIENABLED css to have margin-right:0px ! important and it doesn't fix it.  On firefox there is no right margin.

Hopefully these are known issues with simple solutions ;)

Regards,

Jon

8 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Jul 2009, 11:52 AM
Hi Jon,

We will need a sample page in order to reproduce and investigate the problem with changing width of the textbox.

As for the other question, are you sure you are using the correct CSS classes? CSS is a case-sensitive language.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
answered on 13 Jul 2009, 12:27 PM
Hi Dimo,

I've done some research and have found that if you create a new aspx page, set the Theme to Web20 in the PreInit of the codebehind - it's worth noting that this behaved differently when the theme was the default theme.  Then insert the following text into the page itself.

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server">  
    <title></title>  
    <style type="text/css">  
 span.RadInput  
{  
    margin-right:0px ! important;  
    background-color:Red;  
}  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <telerik:RadScriptManager ID="uxRadScriptManager" runat="server"></telerik:RadScriptManager> 
    <telerik:RadTextBox ID="uxDocumentType" Runat="server" Text='Dummy Text' MaxLength="50" ></telerik:RadTextBox> 
    <telerik:RadFormDecorator ID="uxRadFormDecorator" Runat="server" DecoratedControls="All" /> 
    </form> 
</body> 
</html> 

Runup the page and initially you'll see a gap between the left border and the text in the textbox.  Now move the cursor over the field, the left padding collapses and the right edge of the textbox moves to the left by the same amount.  You'll also see the unexpected right padding I mentioned in red.

Turning off the formdecorator for input fields fixes the movement issue but there is still a 1 px padding to the right of the text box.

Obviously the form decorator could be turned off for input boxes but there is still a slight issue even then.

This is on IE 7, I haven't checked this page out on other browsers.

Best Regards,

Jon


0
Dimo
Telerik team
answered on 13 Jul 2009, 03:23 PM
Hello Jon,

I am afraid I still can't reproduce the problem that you are describing. You have not specified your RadControls version, so I tested with the latest one. The textbox does not resize on hover. The red background on the right side should be 1px wide, because there is a 1px wide hidden textbox at the right side of the RadTextBox control. You can hide it completely with the following CSS rule, but you will not be able to use callout extenders with RadTextBox:

.rdfd_
{
    display:none;
}


If you need further assistance, please send us a complete runnable web project in a support ticket.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
answered on 13 Jul 2009, 03:36 PM
Hi Dimo,

That's really odd that you don't get the same result.  I'm using the latest ver from 1st July & IE7.

Have a look at the support requests from me.  There is an open request for something else that also has the code for this issue on the page.  I've cut the page right down so there are only the two issue on it and both are independant from each other.

When you tested did you have the form decorator enabled for All as that seems to be the trigger.  I have a feeling that for some reason the formdecorator is decorating the text box when it shouldn't be (I assume there is detection for it to avoid RadTextBoxes?

For the time being I have disabled the formdecorator's processing on my forms for the input control.  Am I right in thinking that the more controls I restrict it too the faster the page will load?

Regards,

Jon
0
Dimo
Telerik team
answered on 15 Jul 2009, 10:53 AM
Hello Jon,

I am sorry, I can't reproduce the problem. Below you will find my test page, based on yours.

As for the RadFormDecorator question - generally yes, the less controls you decorate, the better the browser performance. The decorating of most of the elements requires the use of Javascript, because new HTML nodes are created and inserted. On a side note, setting <compilation debug ="false" /> in the web.config improves the Javascript performance.


<%@ Page Language="VB" %> 
<%@ 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"
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>RadControls for ASP.NET AJAX</title> 
<style type="text/css"
.whiteText   
{   
    color: White !important;   
}   
span.RadInput 
    margin-right:0px ! important; 
    background-color:Red; 
</style> 
</head> 
<body> 
<form id="form1" runat="server"
 
<telerik:RadScriptManager ID="uxRadScriptManager" runat="server" /> 
         <script type="text/javascript"
                function onNodeClicking(sender, args) 
                { 
                    OpenFixedSizeWindow("DocumentType_Admin.aspx?ViewView=View&DocumentTypeID=" + args.get_node().get_value()); 
                    return false; 
                 } 
                 function ShowInsertForm() { 
                     OpenFixedSizeWindow("DocumentType_Admin.aspx?View=New"); 
                     return false; 
                 } 
        </script> 
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
            <script type="text/javascript"
                function pageLoad() { 
                    var menu = $find('<%= uxRadMenu.ClientID %>'); 
                    var items = menu.get_items(); 
                    for (var i = 0; i < items.get_count(); i++) { 
                        items.getItem(i).get_linkElement().className = "rmLink rmDisabled whiteText"
                    } 
                }   
            </script>   
        </telerik:RadCodeBlock>  
        <telerik:RadAjaxManager id="uxRadAjaxManager" runat="server"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="uxRadTreeView"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="uxRadTreeView" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        <telerik:RadMenu ID="uxRadMenu" Runat="server" Skin="Web20"
            <Items> 
                <telerik:RadMenuItem runat="server" Text="" Width="20px" Height="24px" ImageUrl="~/Images/Icons/AddRecord.gif" Enabled="True" NavigateUrl="javascript:OpenFixedSizeWindow('DocumentType_Admin.aspx?View=New');"></telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Document Type" Width="197px" Enabled="False"></telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Security Role" Width="180px" Enabled="False"></telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Cat. Only?" Width="65px" Enabled="False"></telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Exp. Rqd?" Width="65px" Enabled="False"></telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Enabled?" Width="65px" Enabled="False"></telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" ImageUrl="~/Images/Icons/Refresh.gif" Width="174px" Height="24px" Enabled="True" NavigateUrl="javascript:location.reload(true);"></telerik:RadMenuItem> 
            </Items> 
        </telerik:RadMenu> 
        <br /> 
        <br /> 
        <br /> 
        <telerik:RadTextBox ID="uxDocumentType" Runat="server" Text='Dummy Text' MaxLength="50" Skin="Web20" /> 
        <telerik:RadFormDecorator ID="uxRadFormDecorator" Runat="server" DecoratedControls="All" Skin="Web20" /> 
 
</form> 
</body> 
</html> 


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
answered on 20 Jul 2009, 08:24 AM
Hi Dimo,

Thanks for the performance advice.  I have to confess to having forgotten to turn off the Debug flag for the live site and just turned it off.  There certainly is a performance hike!

Regarding the issue with the form decorator I've just figured out what is causing the issue.  In another post (http://www.telerik.com/community/forums/aspnet-ajax/form-decorator/q2-2-9-renders-buttons-with-black-text-on-ie6-and-white-text-on-ie7.aspx) I had an issue with the new style for buttons on the Q2 release.  The fix was to introduce the following CSS into the style sheet

*+html .rfdDecorated  
{  
 padding-left4px !important;  

Taking that out fixes the problem with the textbox but reintroduces the issue for the buttons. 

I'm not so worried as my solution uses RadTextBoxes rather than for decorated Inputs. 

Best Regards,

Jon



0
Dimo
Telerik team
answered on 20 Jul 2009, 11:52 AM
Hi Jon,

You can leave your CSS rule, but modify it, so that it is applied only by buttons, not textboxes:

*+html .rfdDecorated[type="button"],
*+html .rfdDecorated[type="submit"],
*+html .rfdDecorated[type="reset"]

 padding-left: 4px !important; 
}



Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
answered on 20 Jul 2009, 12:20 PM
Hi Dimo,

Superb - I didn't realise that you could do that.  Just goes to show how you can work with something for years but still not know all of the functionality of it!

Best Regards,

Jon
Tags
Editor
Asked by
Jon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jon
Top achievements
Rank 1
Share this question
or