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

Rounded Corners for RadInput

33 Answers 621 Views
Input
This is a migrated thread and some comments may be shown as answers.
virt
Top achievements
Rank 1
virt asked on 16 Jun 2009, 02:21 PM
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



33 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 17 Jun 2009, 08:39 AM
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.
0
Kirk Couser
Top achievements
Rank 1
answered on 08 Jan 2010, 07:12 PM
I'm using the latest version and am running into the same problem with RadTextBoxes not being rounded, is there a better workaround?
0
Dimo
Telerik team
answered on 11 Jan 2010, 09:30 AM
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.
0
Harry Kable
Top achievements
Rank 1
answered on 08 Apr 2010, 04:13 AM
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
0
Dimo
Telerik team
answered on 08 Apr 2010, 11:53 AM
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.
0
Paul Silver
Top achievements
Rank 1
answered on 15 Jul 2010, 05:28 PM
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";
                }
            }
        }
    }
}
0
Lone
Top achievements
Rank 1
answered on 17 Jul 2010, 10:20 AM
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
0
Dimo
Telerik team
answered on 19 Jul 2010, 08:16 AM
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
0
Bruno
Top achievements
Rank 1
answered on 18 Nov 2011, 06:51 PM
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.
0
Princy
Top achievements
Rank 2
answered on 21 Nov 2011, 04:57 AM
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.
0
Bruno
Top achievements
Rank 1
answered on 25 Nov 2011, 06:10 PM
Hi Princy,

Is this from CSS 3?

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

Thanks,
Bruno
0
Bruno
Top achievements
Rank 1
answered on 25 Nov 2011, 06:18 PM
Hi Princy,

Is this from CSS 3?

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

Thanks,
Bruno
0
Bruno
Top achievements
Rank 1
answered on 25 Nov 2011, 06:38 PM
Hi Princy,

Is this from CSS 3?

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

Thanks,
Bruno
0
Princy
Top achievements
Rank 2
answered on 28 Nov 2011, 06:55 AM
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.
0
Galin
Telerik team
answered on 30 Nov 2011, 05:21 PM
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
0
Andrew
Top achievements
Rank 1
Veteran
Iron
answered on 29 Feb 2012, 09:13 PM
I want to go the other way, how do I remove the radius from the RadComboBox

I don't want the rounded corners
0
Ivana
Telerik team
answered on 05 Mar 2012, 10:02 AM
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.
0
Andrew
Top achievements
Rank 1
Veteran
Iron
answered on 05 Mar 2012, 02:45 PM
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.
0
Ivana
Telerik team
answered on 08 Mar 2012, 09:35 AM
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.
0
Mohammed
Top achievements
Rank 2
answered on 14 Aug 2012, 06:44 PM
Hi ,
kindly let me know if you discovered a better solution to round corner RadTextBox


0
Andrew
Top achievements
Rank 1
Veteran
Iron
answered on 14 Aug 2012, 07:13 PM
try

 

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

 

0
Mohammed
Top achievements
Rank 2
answered on 14 Aug 2012, 08:28 PM
thanks very much,
i thought there is a way inside the rad text box control it self to allow rounded corners so far.
0
rootberg
Top achievements
Rank 2
answered on 17 Aug 2012, 01:02 PM
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.
0
Mohammed
Top achievements
Rank 2
answered on 17 Aug 2012, 02:06 PM
thanks,
0
rootberg
Top achievements
Rank 2
answered on 17 Aug 2012, 02:30 PM
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.
0
SSirica
Top achievements
Rank 3
Iron
Iron
Iron
answered on 05 Feb 2013, 05:04 PM
I'm experiencing the width issue too.  Did you figure out a work around?
0
Hristo Valyavicharski
Telerik team
answered on 08 Feb 2013, 01:30 PM
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.
0
Al
Top achievements
Rank 1
answered on 15 Oct 2013, 07:02 PM
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
0
Shinu
Top achievements
Rank 2
answered on 16 Oct 2013, 04:25 AM
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.
0
Al
Top achievements
Rank 1
answered on 17 Oct 2013, 10:40 PM
it's working for the textbox but no dice on the combobox, is their some other override? The base skin from the style builder is "Simple" if that helps
0
Ivan Zhekov
Telerik team
answered on 22 Oct 2013, 01:24 PM
Hello.

This thread is quite long and may be not relevant -- we have made several improvements and changes to the rendering of the controls over the past few years, so the information here may be out of date.

It will be best if you start a new thread (support / forum) and share the version of the controls you use. For instance you can name the thread "Rounded Corners for RadInput and RadComboBox 2012.2.919" (if you are using Telerik.Web.UI version 2012.2.919).

Dont forget to attach your custom skin, so we could look at it as well.

Also, do you want rounded corners for the classic rendering or the light-weight rendering? If the latter, the fix will be quite small.

Regards,
Ivan Zhekov
Telerik
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 the blog feed now.
0
Al
Top achievements
Rank 1
answered on 22 Oct 2013, 03:37 PM

2013.2.611.40

The base skin from the style builder is "Simple" if that helps

this dose not work totally
 .RadComboBox table td.rcbInputCell{
border-radius: 0 0 0 4px !important;
}
.rcbArrowCell{
border-radius:0 4px 4px 0 !important;
}

this works as it should

.riTextBox{
border-radius:0 4px 4px 4px !important;
}

If someone can provide stripped out RadComboBox css with rounded corners (NO SPRITES) I can make it work for my purposes or tell me how to remove the global hulksmash code that is overriding everything logical
Thanks
0
Ivan Zhekov
Telerik team
answered on 25 Oct 2013, 03:16 PM
The reason why simply setting the border radius to the cell will have no effect is that the table has border-collapse style set to collapse. You have to unset it.

I am attaching two snippets illustrating what needs to be done for classic and light weight render mode.

Note: do not place both classic and lightweight render mode controls of the same type on the same page.

ASPX
<!-- Classic render mode -->
<telerik:RadComboBox runat="server" Skin="Simple" CssClass="rcbRounded">
    <Items>
        <telerik:RadComboBoxItem Text="Item" />
    </Items>
</telerik:RadComboBox>
 
<!-- Light-weight render mode -->
<telerik:RadComboBox runat="server" CssClass="rcbRounded" RenderMode="Lightweight">
    <Items>
        <telerik:RadComboBoxItem Text="Item" />
    </Items>
</telerik:RadComboBox>


CSS
/** Classic render mode */
.rcbRounded table {
    border-collapse: separate !important;
    border-spacing: 0;
}
.rcbRounded .rcbArrowCellLeft,
.rcbRounded .rcbInputCellLeft {
    border-radius: 5px 0 0 5px;
}
.rcbRounded .rcbArrowCellRight,
.rcbRounded .rcbInputCellRight {
    border-radius: 0 5px 5px 0;
}
 
/** Light-weigh render mode */
div.rcbRounded .rcbInner {
    border-radius: 10px;
}
div.rcbRounded .rcbActionButton {
    border-radius: 0 10px 10px 0;
}


Regards,
Ivan Zhekov
Telerik
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 the blog feed now.
Tags
Input
Asked by
virt
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Kirk Couser
Top achievements
Rank 1
Harry Kable
Top achievements
Rank 1
Paul Silver
Top achievements
Rank 1
Lone
Top achievements
Rank 1
Bruno
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Galin
Telerik team
Andrew
Top achievements
Rank 1
Veteran
Iron
Ivana
Telerik team
Mohammed
Top achievements
Rank 2
rootberg
Top achievements
Rank 2
SSirica
Top achievements
Rank 3
Iron
Iron
Iron
Hristo Valyavicharski
Telerik team
Al
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Ivan Zhekov
Telerik team
Share this question
or