Joel Kraft
Top achievements
Rank 2
Rank 2
Joel Kraft
asked on 23 Jun 2009, 02:39 PM
I'm curious why an asp:Textbox that is decorated with RadFormDecorator looks different than a RadTextBox. Regular textboxes cannot always be replaced with the radTextbox (if they are generated by a third-party control, for example, including edit forms in radGrid), and sometimes it just isn't necessary. I would expect that if I used some radControls, I should be able to use form decorator to take care of everything else, and I would see a consistent styling across the board, but that is not the case.
If I use radTextBox or radInputManager on an asp:Textbox, I get a nice sqared-off look (I am using the Simple theme applied globally in web.config). If I use form decorator, though, I get rounded corners. I don't find them attractive at all, especially since it seems to decrease the height of the textbox as well, but more importantly, they simply do not match! (I haven't tried all of the skins, but this seems to be the case for what I have looked at.)
There really should be some uniformity here!
Joel
If I use radTextBox or radInputManager on an asp:Textbox, I get a nice sqared-off look (I am using the Simple theme applied globally in web.config). If I use form decorator, though, I get rounded corners. I don't find them attractive at all, especially since it seems to decrease the height of the textbox as well, but more importantly, they simply do not match! (I haven't tried all of the skins, but this seems to be the case for what I have looked at.)
There really should be some uniformity here!
Joel
21 Answers, 1 is accepted
0
Hello Joel,
The decision to add rounded corners to the decorated textboxes was taken after we received numerous requests for such feature. Please note that by default the decorator does not style textboxes - they will be decorated only if you use All or add TextBox in the DecoratedControls property. If for some reason you prefer to keep DecoratedControls="All", you could use the EnableRoundedCorners property - just set it to false and the textboxes will look as expected.
Greetings,
Georgi Tunev
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.
The decision to add rounded corners to the decorated textboxes was taken after we received numerous requests for such feature. Please note that by default the decorator does not style textboxes - they will be decorated only if you use All or add TextBox in the DecoratedControls property. If for some reason you prefer to keep DecoratedControls="All", you could use the EnableRoundedCorners property - just set it to false and the textboxes will look as expected.
Greetings,
Georgi Tunev
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
Joel Kraft
Top achievements
Rank 2
Rank 2
answered on 24 Jun 2009, 09:28 PM
OH golly, I don't know how I missed that. Personally, that seems like the type of thing that would have "false" as a default, but I'll live. :-)
Thanks!
Thanks!
0
Joel Kraft
Top achievements
Rank 2
Rank 2
answered on 25 Jun 2009, 06:57 PM
Well the rounded corners definitly help... I think there are still other issues with a decorated textbox, though. A RadTextBox and a standard TextBox with RadInputManager both look the same. They are large, and have a pleasing amount of padding inside of the control's border. A decorated TextBox is noticably shorter, and it has no padding at all.
Because of the behavior of RadInputManager, it is obviously possible to decorate an asp:TextBox to look the same as a RadTextBox, so RadFormDecorator should make them look that exact same way!
Because of the behavior of RadInputManager, it is obviously possible to decorate an asp:TextBox to look the same as a RadTextBox, so RadFormDecorator should make them look that exact same way!
0
Hello Joel,
One of the main ideas behind the RadFormDecorator control is that it does not change the size, orientation etc. features of the controls that it decorates - it is up to the developer to decide how exactly they will be sized and positioned. Indeed, a decorated textbox does not look entirely like a RadTextBox, but you could use custom style to fine tune the look of the control so they would look alike.
For example (see attached screenshot):
Greetings,
Georgi Tunev
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.
One of the main ideas behind the RadFormDecorator control is that it does not change the size, orientation etc. features of the controls that it decorates - it is up to the developer to decide how exactly they will be sized and positioned. Indeed, a decorated textbox does not look entirely like a RadTextBox, but you could use custom style to fine tune the look of the control so they would look alike.
For example (see attached screenshot):
| <head runat="server"> |
| <title></title> |
| <style type="text/css"> |
| .rfdInput |
| { |
| font: normal 12px "segoe ui" , arial, sans-serif; |
| padding: 2px 1px 3px 1px !important; |
| margin-right: 2px; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox" |
| EnableRoundedCorners="false" /> |
| <telerik:RadTextBox ID="RadTextBox1" runat="server" Text="RadTextBox1"> |
| </telerik:RadTextBox><telerik:RadTextBox ID="RadTextBox2" Text="RadTextBox2" runat="server"> |
| </telerik:RadTextBox> |
| <asp:TextBox Text="TextBox1" ID="TextBox1" runat="server"></asp:TextBox><asp:TextBox |
| Text="TextBox2" ID="TextBox2" runat="server">TextBox2</asp:TextBox> |
| </form> |
Greetings,
Georgi Tunev
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
Joel Kraft
Top achievements
Rank 2
Rank 2
answered on 26 Jun 2009, 03:42 PM
>One of the main ideas behind the RadFormDecorator control is that it
does not change the size, orientation etc.
>features of the controls that it decorates - it is up to the developer to decide how exactly they will be sized and positioned.
This seems like an odd thing to say! If I was interested in doing all of this myself, then why on earth would I use the form decorator at all! When I use it, my goal would be to get a consistent radControls look and feel on controls that I cannot influence any other way. In cases where I wanted to customize them, I could then make some additional changes on my own just like I would have to do for any other skin customization. Additionally, because the form decorator supports the same "universal" skins as RadInputMangaer and RadTextBox, I would assume that the default result of that skinning on an identical control would be the same!!
Now if other customers disagree with me, I'd be interested in hearing other points of view.
Now I'm going to get back and be a bit more helpful. :-) I went and inspected what was going on in more detail, and definitely see that there is no influence on the margin and padding of a decorated Textbox. The problem I am encountering is because the border-style and border-width attributes are being changed. In FireFox, the default border-style appears to be "inset 2px". In reality, it looks like a 1px border, with 1px of internal padding. Changing that to "solid 1px" means that although in the strictest CSS sense you have not changed the padding, there is visual change in the padding!
To compensate, i think you need to include the "padding: 2px 1px 3px 1px" in your version of .rfdInput. I'm going to override this for now, but shouldn't need to...
Joel
>features of the controls that it decorates - it is up to the developer to decide how exactly they will be sized and positioned.
This seems like an odd thing to say! If I was interested in doing all of this myself, then why on earth would I use the form decorator at all! When I use it, my goal would be to get a consistent radControls look and feel on controls that I cannot influence any other way. In cases where I wanted to customize them, I could then make some additional changes on my own just like I would have to do for any other skin customization. Additionally, because the form decorator supports the same "universal" skins as RadInputMangaer and RadTextBox, I would assume that the default result of that skinning on an identical control would be the same!!
Now if other customers disagree with me, I'd be interested in hearing other points of view.
Now I'm going to get back and be a bit more helpful. :-) I went and inspected what was going on in more detail, and definitely see that there is no influence on the margin and padding of a decorated Textbox. The problem I am encountering is because the border-style and border-width attributes are being changed. In FireFox, the default border-style appears to be "inset 2px". In reality, it looks like a 1px border, with 1px of internal padding. Changing that to "solid 1px" means that although in the strictest CSS sense you have not changed the padding, there is visual change in the padding!
To compensate, i think you need to include the "padding: 2px 1px 3px 1px" in your version of .rfdInput. I'm going to override this for now, but shouldn't need to...
Joel
0
Joel Kraft
Top achievements
Rank 2
Rank 2
answered on 26 Jun 2009, 03:56 PM
Oops. Sorry I meant to say that the whole thing needs to be in there to make them look the same, just as your example shows. The font affects the size of the textbox as well...
Joel
Joel
0
Ang Lim
Top achievements
Rank 1
Rank 1
answered on 19 Aug 2009, 12:56 PM
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox" |
| EnableRoundedCorners="true" /> |
| <telerik:RadTextBox ID="RadTextBox1" runat="server" Text="RadTextBox1"> |
| </telerik:RadTextBox> Hi Georgi just want to ask how do i EnableRoundedCorners on RadTextBox? The above code doesn't work on RadTextBox but it work on asp.net textbox. One more thing i just wondering how to add a button in a RadTextBox. Like the one in this website. Thanks |
0
Hello Ang,
The RadFormDecorator control does not decorate RadTextBox - it style standard controls only like asp:textbox, checkboxes, fieldsets, etc. Indeed, RadTextBox uses input elements which can be decorated, but it also uses classes to style them. RadFormDecorator on the other hand will not style elements that have a class assigned - in such case we assume that the developer want to have control over the look of the element. This being said you could force the decorator to style RadTextBox if you set RadTextBox's skin to an empty string, but this will lead to problems with your other question where you want to put a button inside the textbox.
As for the second question, I believe that the following Code Library will be of help:
http://www.telerik.com/community/code-library/aspnet-ajax/input/how-to-create-a-button-inside-a-radtextbox-ui.aspx
Greetings,
Georgi Tunev
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.
The RadFormDecorator control does not decorate RadTextBox - it style standard controls only like asp:textbox, checkboxes, fieldsets, etc. Indeed, RadTextBox uses input elements which can be decorated, but it also uses classes to style them. RadFormDecorator on the other hand will not style elements that have a class assigned - in such case we assume that the developer want to have control over the look of the element. This being said you could force the decorator to style RadTextBox if you set RadTextBox's skin to an empty string, but this will lead to problems with your other question where you want to put a button inside the textbox.
As for the second question, I believe that the following Code Library will be of help:
http://www.telerik.com/community/code-library/aspnet-ajax/input/how-to-create-a-button-inside-a-radtextbox-ui.aspx
Greetings,
Georgi Tunev
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
Darpan Perumal
Top achievements
Rank 1
Rank 1
answered on 24 Sep 2009, 06:29 PM
Hi Georgi,
I Understand that formdecorator will not affect the radtextbox. But i want to make it look similar to decorated asp textboxes(Rounded corners enabled). So can u give me the complete CSS Styles that can change the look of RadTextbox similar to that of decorated asp Textboxes.
I Understand that formdecorator will not affect the radtextbox. But i want to make it look similar to decorated asp textboxes(Rounded corners enabled). So can u give me the complete CSS Styles that can change the look of RadTextbox similar to that of decorated asp Textboxes.
0
Hello Darpan Perumal,
You cannot make RadInput look like the inputs decorated by RadFormDecorator, because it is not only CSS but also JavaScript that renders additional elemenents around the form controls in order to create rounded corners, etc. However, if you need the CSS that we are using for RadFormDecorator, you make take it from RadControlsInstallationRoot\Skins\ in the distribution file of our suite.
Kind regards,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
You cannot make RadInput look like the inputs decorated by RadFormDecorator, because it is not only CSS but also JavaScript that renders additional elemenents around the form controls in order to create rounded corners, etc. However, if you need the CSS that we are using for RadFormDecorator, you make take it from RadControlsInstallationRoot\Skins\ in the distribution file of our suite.
Kind regards,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
rh
Top achievements
Rank 1
Rank 1
answered on 27 Jan 2010, 01:39 AM
I agree with Joel that the form decorator should make the control look exactly the same as a RadTextBox. In an application we want a consistent look. There are cases on a single form where some textboxes need the full functionality of the RadTextBox and some don't. To eliminate the size bloat and initial hit on the page initialization we need to use asp textbox for those controls that don't need the full RadTextBox functionality. In this scenario, we need all of the textboxes on the page to look the same. We should be able to accomplish this by simply setting the skin in both cases to use the same skin. We should not have to write custom code ourselves to make the controls look consistent.
0
jfkrueger
Top achievements
Rank 1
Rank 1
answered on 06 Oct 2010, 11:17 PM
I completely agree with Joel as well, seems kind of pointless to have the RadFormDecorator style controls differently than their Rad coounterparts. It is consistency we are after!
0
Greg
Top achievements
Rank 1
Rank 1
answered on 22 Oct 2010, 05:22 AM
Joel put it perfectly. Consistency should be maintained across all manifestations of a skin on a control regardless of where that implementation comes from (FormDecorator, RadInputManager or directly setting a skin on a telerik control).
0
DavidS
Top achievements
Rank 1
Rank 1
answered on 08 Aug 2011, 07:11 PM
Can I just add my support to Joel etc here. My thought process has gone roughly like this today...
1) I like those pretty rounded corner Textboxes that Telerik have tempted me with via their RadFormDecorator!
2) Damn, I seem to be hitting all sort of sizing problems when I use asp:textboxes and RadFormDecorator across different browsers.. or more specifically different IE versions.
3) Hold on, Isn't this exactly the sort of thing that Telerik are supposed to be protecting me from? This RadInput control looks like just the thing though. Lovely, I seem to have got rid of these pesky sizing problems. Now if I can get my rounded corners back by adding a RadFormDecorator ...
4) Lovely, that seems to work across my current browsers....
5) ... but it doesn't with IE in anything prior to 9.
6) Hmmm. Looks like if I want to have rounded corners I've got to do manual browser checking/sizing. But I bought Radcontrols specifically to avoid that sort of thing. Probably I should just forget the rounded corners thing. Shame I've wasted a day on this now.
1) I like those pretty rounded corner Textboxes that Telerik have tempted me with via their RadFormDecorator!
2) Damn, I seem to be hitting all sort of sizing problems when I use asp:textboxes and RadFormDecorator across different browsers.. or more specifically different IE versions.
3) Hold on, Isn't this exactly the sort of thing that Telerik are supposed to be protecting me from? This RadInput control looks like just the thing though. Lovely, I seem to have got rid of these pesky sizing problems. Now if I can get my rounded corners back by adding a RadFormDecorator ...
4) Lovely, that seems to work across my current browsers....
5) ... but it doesn't with IE in anything prior to 9.
6) Hmmm. Looks like if I want to have rounded corners I've got to do manual browser checking/sizing. But I bought Radcontrols specifically to avoid that sort of thing. Probably I should just forget the rounded corners thing. Shame I've wasted a day on this now.
0
Hello David,
Without any code provided I could not tell how to fix the reported issues. I suppose the main problems come from the fact that when using RadInput the controls does not have rounded corners even if there is a RadFormDecorator on the page.
Actually it could decorates them if you put empty skin property in the RadInput control: Skin="".
Also, the default input width for these controls seems to be different, but it could also be fixed if you use the width property. Bellow is a sample code showing my test with several radinputs and asp:textbox and normal input type="text":
Now we have all input with rounded corners and equal width, as shown in the attached inputs.gif image.
I have checked the width in the different browsers and it is really different, if I use the width property set to 180 - width="180", in FireFox, Chrome and Safari the width is 182px, in Opera and IE9 it is 184px, in IE7 it is 191px and in IE8 it is 188px.
It`s clear that in modern browsers the width is fine 182px and 184px - the difference is browser behavior and it is not related to the Teleriks`s controls. I have checked it with undecorated input - <input type="text" style="width: 180px;" class="class" /> with inline style set to to 180px and again in FireFox it is 182px while in IE9 it is 184px.
In IE7 and IE8 things are much worse, but that comes from the fact the we are using different HTML rendering compared to the rendering used in modern browsers. While in modern browsers we are using CSS border-radius property to create rounded corners, in IE7 and IE8 we are rendering an additional table element in order to simulate rounded corners, and it is normal to have an additional width added to the input.
Note that for the Q3 we have scheduled a task to go through all Telerik input controls and to make them consistent as much as it is possible.
Regards,
Bojo
the Telerik team
Without any code provided I could not tell how to fix the reported issues. I suppose the main problems come from the fact that when using RadInput the controls does not have rounded corners even if there is a RadFormDecorator on the page.
Actually it could decorates them if you put empty skin property in the RadInput control: Skin="".
Also, the default input width for these controls seems to be different, but it could also be fixed if you use the width property. Bellow is a sample code showing my test with several radinputs and asp:textbox and normal input type="text":
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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></title></head><body> <form id="form1" method="post" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadSkinManager ID="rskm1" runat="server" ShowChooser="true"> </telerik:RadSkinManager> <br /><br /> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> <asp:TextBox ID="tb1" runat="server" Width="180"></asp:TextBox> <br /><br /> <telerik:RadTextBox ID="tb2" runat="server" Skin="" Width="180"> </telerik:RadTextBox> <br /><br /> <telerik:RadNumericTextBox ID="tb3" runat="server" Skin="" Width="180"> </telerik:RadNumericTextBox> <br /><br /> <telerik:RadDateInput ID="tb4" runat="server" Skin="" Width="180"> </telerik:RadDateInput> <br /><br /> <telerik:RadMaskedTextBox ID="tb5" runat="server" Skin="" Width="180"> </telerik:RadMaskedTextBox> <br /><br /> <input type="text" style="width: 180px;" /> </form></body></html>Now we have all input with rounded corners and equal width, as shown in the attached inputs.gif image.
I have checked the width in the different browsers and it is really different, if I use the width property set to 180 - width="180", in FireFox, Chrome and Safari the width is 182px, in Opera and IE9 it is 184px, in IE7 it is 191px and in IE8 it is 188px.
It`s clear that in modern browsers the width is fine 182px and 184px - the difference is browser behavior and it is not related to the Teleriks`s controls. I have checked it with undecorated input - <input type="text" style="width: 180px;" class="class" /> with inline style set to to 180px and again in FireFox it is 182px while in IE9 it is 184px.
In IE7 and IE8 things are much worse, but that comes from the fact the we are using different HTML rendering compared to the rendering used in modern browsers. While in modern browsers we are using CSS border-radius property to create rounded corners, in IE7 and IE8 we are rendering an additional table element in order to simulate rounded corners, and it is normal to have an additional width added to the input.
Note that for the Q3 we have scheduled a task to go through all Telerik input controls and to make them consistent as much as it is possible.
Regards,
Bojo
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
DavidS
Top achievements
Rank 1
Rank 1
answered on 09 Aug 2011, 07:27 PM
Thanks for your reply Bojo. In fact the biggest issue I was hitting related to the fact that my situation was as with your demo but INSIDE A RadAjaxPanel. This causes additional complications for IE7&8(my point 5 below). Now I had the begining of an answer on that particular point using EnableAjaxSkinRendering on my page load and placing my formdecorator INSIDE each RadAjaxPanel . This was leading to to some other issues... however ... the only reason that I'd bothered using RadInput in the first place was that for some reason I had thought it was going to make my life easier with the cross browser sizing issue. In fact as you point out it doesn't, so I've no reason to waste my time on RadInputs. Asp:TextBoxes are no worse on the cross browser sizing issue and avoid the Ajax related complications mentioned above completely.
So where I am now is that I've abandoned one Telerik tool to achieve better cross browser consistency but in still using the RadFormDecorator for my rounded corners I am still faced with the fact that different browsers will produce widely varying text box lengths: an issue that isn't there otherwise. So I'm thinking should I just abandon another Telerik tool (and my rounded corners) in the name of better cross browser consistency. As I say this seems to me fundamentally wrong because I bought your product specifically to help with cross browser consistency.
Is the best thing that I can do then, to detect what browser my user has and then apply some arithmetic to adjust their textbox size accordingly? Can you tell me what a component would look like to apply the relevant arithmetic for each browser?
So where I am now is that I've abandoned one Telerik tool to achieve better cross browser consistency but in still using the RadFormDecorator for my rounded corners I am still faced with the fact that different browsers will produce widely varying text box lengths: an issue that isn't there otherwise. So I'm thinking should I just abandon another Telerik tool (and my rounded corners) in the name of better cross browser consistency. As I say this seems to me fundamentally wrong because I bought your product specifically to help with cross browser consistency.
Is the best thing that I can do then, to detect what browser my user has and then apply some arithmetic to adjust their textbox size accordingly? Can you tell me what a component would look like to apply the relevant arithmetic for each browser?
0
Hi David,
Please, note that different browsers indeed render standard text inputs differently and the difference may be even between operating systems as well. Therefore using the RadFormDecorator you can minimize this difference consistently. Still we are aware that there are various aspects of the rendering that may cause difference as in your case with the width of the inputs. However, this does not necessary means that the provided functionality is not cross-browser - as this term does not mean exactly the same, i.e. clone copy, of the look and feel, but rather that the user experience is almost the same and that the most important functionality is operating as expected among different platforms.
In your particular case my colleague, Bojo, has provided for you a way to have the different inputs look the same among browsers without a huge overhead. If this result does not suite your implementation I should advise you to open a support ticket and send us there a sample project with the issue that you are experiencing so that we can look into it and investigate what would be the best solution to the problem.
Greetings,
Niko
the Telerik team
Please, note that different browsers indeed render standard text inputs differently and the difference may be even between operating systems as well. Therefore using the RadFormDecorator you can minimize this difference consistently. Still we are aware that there are various aspects of the rendering that may cause difference as in your case with the width of the inputs. However, this does not necessary means that the provided functionality is not cross-browser - as this term does not mean exactly the same, i.e. clone copy, of the look and feel, but rather that the user experience is almost the same and that the most important functionality is operating as expected among different platforms.
In your particular case my colleague, Bojo, has provided for you a way to have the different inputs look the same among browsers without a huge overhead. If this result does not suite your implementation I should advise you to open a support ticket and send us there a sample project with the issue that you are experiencing so that we can look into it and investigate what would be the best solution to the problem.
Greetings,
Niko
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
DavidS
Top achievements
Rank 1
Rank 1
answered on 10 Aug 2011, 04:03 PM
Hi
I think we're talking at slight cross purposes here so to get more concrete...
This is what I get when I display Bojo's code in various browsers first without and then with his form decorator (the only difference and the below is for all his controls):
Width without RadFormDecorator Width with RadFormDecorator
IE9 186px 184px
IE8 186px 188px
IE7 186px 191px
FF4 186px 182px
These are the only browsers I've tested and they all display the same width without the form decorator and different ones with it. I'm not sure what's different here from Bojo's comment about <input type="text" style="width: 180px;" class="class" /> but for me Width=180px on RadInputs and asp:TextBox has the above results. Can you confirm or explain what I'm doing wrong if you disagree please.
Georgi commented above that "One of the main ideas behind the RadFormDecorator control is that it does not change the size, orientation etc. features of the controls that it decorates." Whatever the debates around that particular point, in this context it appears to be doing just that. If I am right about this point then it's down to Telerik to give a definitive statement on what the variations are per browser/OS. I can of course write some code to add or subtract pixels to the width based on Request.Browser.Type but I don't feel that I can do this definitively for various operating systems and browser versions, and frankly don't think its down to me to do that.
I think we're talking at slight cross purposes here so to get more concrete...
This is what I get when I display Bojo's code in various browsers first without and then with his form decorator (the only difference and the below is for all his controls):
Width without RadFormDecorator Width with RadFormDecorator
IE9 186px 184px
IE8 186px 188px
IE7 186px 191px
FF4 186px 182px
These are the only browsers I've tested and they all display the same width without the form decorator and different ones with it. I'm not sure what's different here from Bojo's comment about <input type="text" style="width: 180px;" class="class" /> but for me Width=180px on RadInputs and asp:TextBox has the above results. Can you confirm or explain what I'm doing wrong if you disagree please.
Georgi commented above that "One of the main ideas behind the RadFormDecorator control is that it does not change the size, orientation etc. features of the controls that it decorates." Whatever the debates around that particular point, in this context it appears to be doing just that. If I am right about this point then it's down to Telerik to give a definitive statement on what the variations are per browser/OS. I can of course write some code to add or subtract pixels to the width based on Request.Browser.Type but I don't feel that I can do this definitively for various operating systems and browser versions, and frankly don't think its down to me to do that.
0
Hi David,
I have tested all possible options to display textbox with and without RFD - the following table shows the results.
If you want to use RFD - you could use with with disabled rounded corners, this will give close results in different browsers and will keep the RFD functionality.
IE7 and IE8 are wider with rounded corners as they render an additional HTML elements to imitate rounded corners. I think that in that case, cross browser compatibility is not broken. In my opinion it is not expected that everything will be pixel perfect in all browsers. The cross browser compatibility is not related to the pixel perfect dimension only, but mostly to the look and feel - and I think that RFD achieves this in all major browsers.
Here is the code used for testing:
In the case with 180px set to the texttbox, I would suggest a clear CSS fix, using several browser hacks:
The textbox is wrapped in a div container used for the cascade, because if you apply the CSS class to the texbox directly, it will not be decorated. With the code provided, the textbox width is 182px in IE7-9 and Firefox.
Hope this helps.
Kind regards,
Bojo
the Telerik team
I have tested all possible options to display textbox with and without RFD - the following table shows the results.
|
Browser |
With RFD |
W/o RFD |
With RFD – disabled rounded corners - EnableRoundedCorners="false"
|
W/o RFD – but with hardcoded CSS3 border radius |
|
Firefox |
182px |
186px |
182px |
182px |
|
IE9 |
184px |
186px |
184px |
184px |
|
IE8 |
188px |
186px |
184px |
184px (no XSS3 applied) |
|
IE7 |
191px |
186px |
187px |
184px (no CSS3 applied) |
If you want to use RFD - you could use with with disabled rounded corners, this will give close results in different browsers and will keep the RFD functionality.
IE7 and IE8 are wider with rounded corners as they render an additional HTML elements to imitate rounded corners. I think that in that case, cross browser compatibility is not broken. In my opinion it is not expected that everything will be pixel perfect in all browsers. The cross browser compatibility is not related to the pixel perfect dimension only, but mostly to the look and feel - and I think that RFD achieves this in all major browsers.
Here is the code used for testing:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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></title> <style type="text/css"> /*uncommnet to test and add CssClass="round to the asp:Textbox"*/ /*.round { border-radius: 4px; border: 1px solid; }*/ </style></head><body> <form id="form1" method="post" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="true" /> <asp:TextBox ID="tb1" runat="server" Style="width: 180px;"></asp:TextBox> </form></body></html>In the case with 180px set to the texttbox, I would suggest a clear CSS fix, using several browser hacks:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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></title> <style type="text/css"> /*uncommnet to test and add CssClass="round to the asp:Textbox"*/ /*.round { border-radius: 4px; border: 1px solid; }*/ .tbWrap input[type=text] { width: 180px; } /*IE8 hack*/ .tbWrap input[type=text] { width: 174px\9; } /* IE7 hack */ *+html .tbWrap input[type=text] { width: 171px; } /*IE9 hack*/ ._Telerik_IE9 .tbWrap input[type=text] { width: 178px; } </style></head><body> <form id="form1" method="post" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="true" /> <div class="tbWrap"> <asp:TextBox ID="tb1" runat="server"></asp:TextBox> </div> </form></body></html>The textbox is wrapped in a div container used for the cascade, because if you apply the CSS class to the texbox directly, it will not be decorated. With the code provided, the textbox width is 182px in IE7-9 and Firefox.
Hope this helps.
Kind regards,
Bojo
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
0
DavidS
Top achievements
Rank 1
Rank 1
answered on 11 Aug 2011, 02:59 PM
Thanks for the feedback again Bojo
I'd already taken a different approach, which I think is a bit more flexible. The code below resides in a Page base class and makes the assumption that I'm going to be using the RadFormDecorator to add rounded corners to ALL of my ASP:TextBoxes. The code's not particularly clever but has the benefiit that all my rounded corner text boxes will be the same size on all browsers... with a few caveats:
1) The sizes that you have reported cover all possible browsers and OSs.
2) ... now and in the future.
3) The RadFormDecorator code doesn't ever change its handling of these.
Now call me pessimistic but I think this is unlikely. That's why I believe ownership of this issue should sit with the developers in charge of RadFormDecorator. They are the only one's who can ever be expected to know what a given "adjustment" figure is (using the terminology of my code).
As a footnote if anyone else wants to use this code they might want to consider changing the values so that specifying Width="XXX" results in getting a rounded corner textbox width that is XXX (crazy, I know). My figures are purely focussed on the rounded corner related adjustments and so ignore the fact that even with a standard textbox specifying Width=180 leads to a width of 186. ( I'd be keen to hear what that's all about if anyone knows?)
protected override void OnLoad(EventArgs e){ base.OnLoad(e); if (!IsPostBack) HandleLoadControls(Page);}private void HandleLoadControls(Control parent){ foreach (Control control in parent.Controls) { if (control is TextBox) RationaliseTBWidth(control as TextBox); else if (control.HasControls()) HandleLoadControls(control); }}private void RationaliseTBWidth(TextBox aTextBox){ if (aTextBox != null && aTextBox.Visible && aTextBox.Width.Value>0) { string browserCategory = (Page.Request.Browser.Browser == "IE") ? Page.Request.Browser.Type : Page.Request.Browser.Browser; int adjustment; switch (browserCategory) { case "IE9": //Treats IE9 as the "correct" width case "Opera": adjustment = 0; break; case "Firefox": case "AppleMAC-Safari": //Case of Safari and Chrome adjustment = +2; break; case "IE8": adjustment = -4; break; case "IE7": adjustment = -7; break; default: adjustment = 0; break; } aTextBox.Width = (aTextBox.Width.Value + adjustment > 0) ? new Unit(aTextBox.Width.Value + adjustment) : new Unit(0); }}0
Hello Davids,
Thank you for your feedback and your sample code. They both are indeed valuable for Telerik and the community. We will review the suggestions that you have provided and will try to improve the functionality of the RadFormDecorator control.
As a sign of gratitude for your activity and patience in this matter, I have updated your Telerik points.
All the best,
Niko
the Telerik team
Thank you for your feedback and your sample code. They both are indeed valuable for Telerik and the community. We will review the suggestions that you have provided and will try to improve the functionality of the RadFormDecorator control.
As a sign of gratitude for your activity and patience in this matter, I have updated your Telerik points.
All the best,
Niko
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.