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
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
0
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.
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
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.
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
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
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.
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
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
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
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.
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.
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
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
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
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-left: 4px !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
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.
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
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
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