Rounded Corners for RadInput

34 posts, 0 answers
  1. virt
    virt avatar
    27 posts
    Member since:
    Sep 2008

    Posted 16 Jun 2009 Link to this post

    Hello,

    We need to style RadInput (RadTextBox) with rounded corners. The ideal solution of course would be to use FormDecorator, but at this point it does not apply to RadInput. After searching through support forums I found following workaround:

    http://www.telerik.com/community/forums/aspnet-ajax/form-decorator/raddatepicker-rounded-corners.aspx

    Which basically requires to add following code to each and every RadTextBox present on the page:

    <script runat="server">  
      
        protected void Page_PreRenderComplete(object sender, EventArgs e)  
        {  
            if (Request.Browser.IsBrowser("IE"))  
            { 
                RadTextBox1.EnabledStyle.CssClass = String.Empty; 
                RadTextBox1.HoveredStyle.CssClass = String.Empty; 
                RadTextBox1.FocusedStyle.CssClass = String.Empty; 
                RadTextBox1.InvalidStyle.CssClass = String.Empty;  
            }  
            else  
            { 
                RadTextBox1.EnabledStyle.CssClass = "rfdInput rfdRoundedCorners"
                RadTextBox1.HoveredStyle.CssClass = "rfdInput rfdRoundedCorners"
                RadTextBox1.FocusedStyle.CssClass = "rfdInput rfdRoundedCorners"
                RadTextBox1.InvalidStyle.CssClass = "rfdInput rfdRoundedCorners";  
            }  
        } 
         
    </script>  

    The good thing - it works, not so good - you can imagine what needs to be done if there are multiple RadTextBoxes on multiple pages. Which brings me to my question - is there a better way of handling this? Can this be done by modifying CSS for the Skin that we're using without actually adding any code?

    Thank you,
    Andrei



  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Jun 2009 Link to this post

    Hi Andrei,

    I am afraid that currently there is no easier way to make the RadInput textboxes have rounded corners. The problem is not with the RadInput or RadFormDecorator skins, but with the fact that RadInput textboxes always have a CSS class applied, which makes RadFormDecorator skip them.

    We will remove this limitation in one of the coming RadControls releases. Sorry for the inconvenience.

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kirk Couser
    Kirk Couser avatar
    26 posts
    Member since:
    Apr 2009

    Posted 08 Jan 2010 Link to this post

    I'm using the latest version and am running into the same problem with RadTextBoxes not being rounded, is there a better workaround?
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Jan 2010 Link to this post

    Hi Kirk,

    Please set Skin="" for the RadInput textboxes and they will be decorated by the RadFormDecorator. Note that the textboxes should not have percentage widths, nor Labels (Label=""), nor Buttons (ShowButton="false")

    Regards,
    Dimo
    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.
  6. Harry Kable
    Harry Kable avatar
    19 posts
    Member since:
    Jan 2010

    Posted 07 Apr 2010 Link to this post

    Hi Dimo
    How do I get consist presentation across all input controls?
    RadComboBox appears with rounded corners by default. Rad input boxes appear without rounded corners by default.
    If I set Skin="", it fixes RadTextBox but makes a real mess of RadDatePicker.
    My application requires absolute consistency. Is there a way to achieve this? I don't mind tweaking the skin files if that is the answer.
    Regards
    Harry
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Apr 2010 Link to this post

    Hello Harry,

    The RadComboBox rounded corners are realised by using background images. The same approach cannot be used with textboxes, that's why they don't have rounded corners by default.

    The forum thread mentioned above shows how to apply rounded corners to RadDatePicker textboxes. Here is the same demo here:


    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
    <script runat="server">
      
        protected void Page_PreRenderComplete(object sender, EventArgs e)
        {
            if (Request.Browser.IsBrowser("IE"))
            {
                RadDatePicker1.DateInput.EnabledStyle.CssClass = String.Empty;
                RadDatePicker1.DateInput.HoveredStyle.CssClass = String.Empty;
                RadDatePicker1.DateInput.FocusedStyle.CssClass = String.Empty;
                RadDatePicker1.DateInput.InvalidStyle.CssClass = String.Empty;
                RadDatePicker1.DateInput.EmptyMessageStyle.CssClass = String.Empty;
            }
            else
            {
                RadDatePicker1.DateInput.EnabledStyle.CssClass = "rfdInput rfdRoundedCorners";
                RadDatePicker1.DateInput.HoveredStyle.CssClass = "rfdInput rfdRoundedCorners";
                RadDatePicker1.DateInput.FocusedStyle.CssClass = "rfdInput rfdRoundedCorners";
                RadDatePicker1.DateInput.InvalidStyle.CssClass = "rfdInput rfdRoundedCorners";
                RadDatePicker1.DateInput.EmptyMessageStyle.CssClass = "rfdInput rfdRoundedCorners";
            }
        }
      
    </script>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      
    <head id="Head1" runat="server">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>RadControls for ASP.NET AJAX</title>
    <style type="text/css">
    .rcInputCell span input{width:120px !important} /*the picker's width - 20*/
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
      
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox" Skin="Vista" />
      
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Default" Width="140px" />
      
    </form>
    </body>
    </html>


    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Paul Silver
    Paul Silver avatar
    1 posts
    Member since:
    Nov 2009

    Posted 15 Jul 2010 Link to this post

    I was reading this since I ran into the same really frustrating issue with the styling (RadFormDecorator won't style RadInput without workarounds).

    One way to make the solution "global" may be to add a control adapter - e.g. write a class that extends from ControlAdapter, then register it in a .browser file to extend RadTextBox, RadDatePicker, etc. 

    This is the approach I am going to try and take to hack my way to getting the radinput controls to look nice so I can integrate them into the rest of the app without making the forms look strange.

    I haven't finished testing this approach yet but here's my example:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Web.UI.Adapters;
    using System.Web;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    namespace Example
    {
        public class InputAdapter : ControlAdapter
        {
     
            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
     
                Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
            }
     
            void Page_PreRenderComplete(object sender, EventArgs e)
            {
                if (Control is RadTextBox)
                {
                    RadTextBox tbInstance = Control as RadTextBox;
     
                    if (Page.Request.Browser.IsBrowser("IE"))
                    {
                        tbInstance.EnabledStyle.CssClass = String.Empty;
                        tbInstance.HoveredStyle.CssClass = String.Empty;
                        tbInstance.FocusedStyle.CssClass = String.Empty;
                        tbInstance.InvalidStyle.CssClass = String.Empty;
                    }
                    else
                    {
                        tbInstance.EnabledStyle.CssClass = "rfdInput rfdRoundedCorners";
                        tbInstance.HoveredStyle.CssClass = "rfdInput rfdRoundedCorners";
                        tbInstance.FocusedStyle.CssClass = "rfdInput rfdRoundedCorners";
                        tbInstance.InvalidStyle.CssClass = "rfdInput rfdRoundedCorners";
                    }
                }
            }
        }
    }
  9. Lone
    Lone avatar
    6 posts
    Member since:
    Nov 2009

    Posted 17 Jul 2010 Link to this post

    Why is this still not fixed ?? 
    I read a almost one year old post about same issue, getting the decorator fixing RadInput style, with round corners and mouse over effect.
    And in the old post, they promised to fix this issue in next release ??

    Thanks
    Jan
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jul 2010 Link to this post

    Hi Jan,

    RadInput textboxes can now be styled by RadFormDecorator. You need to set Skin="" and EnableEmbeddedBaseStylesheet="false" to the RadInputs. You need Skin="" so that the RadInput textboxes do not render any CSS classes (otherwise RadFormDecorator skips them) and EnableEmbeddedBaseStylesheet="false" is to prevent the control from registering an unneeded CSS base stylesheet.

    Sincerely yours,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Bruno
    Bruno avatar
    20 posts
    Member since:
    Sep 2012

    Posted 18 Nov 2011 Link to this post

    Hi, more than a year has passed since the last message on this subject.

    Are there any improvements? What is the simpliest way to display a rounded corners textbox?

    Thanks,
    Bruno.
  12. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2011 Link to this post

    Hello,

    You can try the following CSS to make the TextBox corner as round
    CSS:
    <style type="text/css">
     .round
     {
      border-top-left-radius: 7px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 6px;
      border-bottom-left-radius: 8px;
     }
    </style>

    Thanks,
    Princy.
  13. Bruno
    Bruno avatar
    20 posts
    Member since:
    Sep 2012

    Posted 25 Nov 2011 Link to this post

    Hi Princy,

    Is this from CSS 3?

    I'm not sure if I should use CSS 3 because of browser compatibility.

    Thanks,
    Bruno
  14. Bruno
    Bruno avatar
    20 posts
    Member since:
    Sep 2012

    Posted 25 Nov 2011 Link to this post

    Hi Princy,

    Is this from CSS 3?

    I'm not sure if I should use CSS 3 because of browser compatibility.

    Thanks,
    Bruno
  15. Bruno
    Bruno avatar
    20 posts
    Member since:
    Sep 2012

    Posted 25 Nov 2011 Link to this post

    Hi Princy,

    Is this from CSS 3?

    I'm not sure if I should use CSS 3 because of browser compatibility.

    Thanks,
    Bruno
  16. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Nov 2011 Link to this post

    Hello,

    This is CSS3. For Mozilla and Safari you need to add prefixes  -moz and -webkit respectively. The vendor prefixes are now no longer necessary for the latest browser releases as they have all adopted the official CSS3 syntax.

    Thanks,
    Princy.
  17. Galin
    Admin
    Galin avatar
    526 posts

    Posted 30 Nov 2011 Link to this post

    Hello,

    The border-space property is part of the CSS 3 and is supported from all modern browsers without prefix. For more information please check out the following site:
    http://caniuse.com/#search=border-radius

    Additionally the old way to achieve this is to add extra elements for every corner, but thus the HTML rendering is charged. In the future we plan to round the corners by using only the CSS 3 properties.

    I hope this helps.

    All the best,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  18. Andrew
    Andrew avatar
    125 posts
    Member since:
    Sep 2008

    Posted 29 Feb 2012 Link to this post

    I want to go the other way, how do I remove the radius from the RadComboBox

    I don't want the rounded corners
  19. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 05 Mar 2012 Link to this post

    Hello Andrew,

    You could try out the Simple rendering mode of RadComboBox. If this is not what you are looking for, you could go for creating a custom skin.

    If you choose to create your own skin, the visual style builder might be of help too. Here is a video of instructions on how to use it: http://tv.telerik.com/watch/aspnet/visualstylebuilder/visual-style-builder-aspnet-ajax-overview.

    I hope this helps.

    All the best,
    Ivana
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  20. Andrew
    Andrew avatar
    125 posts
    Member since:
    Sep 2008

    Posted 05 Mar 2012 Link to this post

    thanks,

    but if I go with simple then it looks like I will lose features of the control that I am using based on the demo, and I custom skin is not an option right now. I just hoping I could do it with css quickly.

    I guess I will just have to live with it for now.

    Thanks.
  21. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 08 Mar 2012 Link to this post

    Hello Andrew,

    Yes, if you use the simple rendering mode you will loose most of the features of RadComboBox. Unfortunately an external CSS will not help in this case because there are images used to accomplish the rounded corners appearance.

    All the best,
    Ivana
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  22. Mohammed
    Mohammed avatar
    87 posts
    Member since:
    Aug 2011

    Posted 14 Aug 2012 Link to this post

    Hi ,
    kindly let me know if you discovered a better solution to round corner RadTextBox


  23. Andrew
    Andrew avatar
    125 posts
    Member since:
    Sep 2008

    Posted 14 Aug 2012 Link to this post

    try

     

    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;

     

  24. Mohammed
    Mohammed avatar
    87 posts
    Member since:
    Aug 2011

    Posted 14 Aug 2012 Link to this post

    thanks very much,
    i thought there is a way inside the rad text box control it self to allow rounded corners so far.
  25. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 17 Aug 2012 Link to this post

    I think the simplest solution is to add the class "rfdRoundedCorners" to the textbox control. Oh... and make sure there is a RadFormDecorator on the page as well. The only issue with this is that it doesn't round the corners in IE8 and lower. But that would be the case with border-radius as well.

    I know that the RadFormDecorator  when applying style to a regular text box in IE8 and lower, it applies html before and after the text box, encapsulating it in a table that contains images for the rounded corners. So this can't happen with a simple class change.
    So I guess you could dissect what the RadFormDecorator   is doing and try to have it trigger on a radtextbox... I haven't had the desire to do this as I just want IE 8 and lower to go away.

    hope this helps.
  26. Mohammed
    Mohammed avatar
    87 posts
    Member since:
    Aug 2011

    Posted 17 Aug 2012 Link to this post

    thanks,
  27. rootberg
    rootberg avatar
    38 posts
    Member since:
    Oct 2012

    Posted 17 Aug 2012 Link to this post

    Almost forgot, there is one more way...

    You can set skin="" and set  EnableEmbeddedBaseStylesheet="false" and RadFormDecorator will take over... but there is a problem. In IE7 (and I am guessing IE6 as well but I haven't tested) it scrunches the TextBox to a total width of about 20px or so and makes the TextBox useless for entering text. In IE8, the TextBox displays about 20px shorter, and in IE9 it displays just fine.

    I would rather have no rounded corners in down-level browsers, then have to mess with trying to correct the width issues.
  28. SSirica
    SSirica avatar
    50 posts
    Member since:
    Jan 2007

    Posted 05 Feb 2013 Link to this post

    I'm experiencing the width issue too.  Did you figure out a work around?
  29. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 08 Feb 2013 Link to this post

    Hi SSirica,

    Could you give us more details about your issue, what exactly is your scenario? It will be very helpful if you can send us a small sample or at least a code snippet.

    Thanks.

    Greetings,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  30. Al
    Al avatar
    4 posts
    Member since:
    Oct 2013

    Posted 15 Oct 2013 Link to this post

    I'm trying to round the corners on the radtextbox and radcombobox. I used telerik visual style builder the get my style  close as possible but the tool dose not have the ability to modify border-radius . I have applied my skin using EnableEmbeddedSkins="false" Skin="My custom skin name ".  It all works as intended , but I then go and tweak the css as needed, I can get the background of the inputs the have a border radius no problem along with many other css changes but the actual 1px border will not take a border-radius, it as if there is some global ultra style that is over powering this one css property.

    Please help because this has turned into a mountainous issue for something very trivial
  31. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 15 Oct 2013 Link to this post

    Hi Al ,

    Please try the following CSS to get round corners on the RadTextBox and RadComboBox.

    CSS:
    <style type="text/css">
        .riTextBox
        {
            border-radius: 5px 5px 5px 5px !important;
        }
        .RadComboBox table td.rcbInputCell
        {
            border-radius: 5px 0 0 5px !important;
        }
        .rcbArrowCell
        {
            border-radius:0 6px 5px 0 !important;
        }
    </style>

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017