Rounded Corners for RadInput

[virt]

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

[Dimo]

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.

[Kirk Couser]

I'm using the latest version and am running into the same problem with RadTextBoxes not being rounded, is there a better workaround?

[Dimo]

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.

[Harry Kable]

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

[Dimo]

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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.

[Paul Silver]

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";
                }
            }
        }
    }
}

[Lone]

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

[Dimo]

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

[Bruno]

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.

[Princy]

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.

[Bruno]

Hi Princy,

Is this from CSS 3?

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

Thanks,
Bruno

[Bruno]

Hi Princy,

Is this from CSS 3?

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

Thanks,
Bruno

[Bruno]

Hi Princy,

Is this from CSS 3?

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

Thanks,
Bruno

[Princy]

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.

[Galin]

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

[Andrew]

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

I don't want the rounded corners

[Ivana]

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

[Andrew]

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.

[Ivana]

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

[Mohammed]

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

[Andrew]

try

 

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

 

[Mohammed]

thanks very much,
i thought there is a way inside the rad text box control it self to allow rounded corners so far.

[rootberg]

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.

[Mohammed]

thanks,

[rootberg]

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.

[SSirica]

I'm experiencing the width issue too.  Did you figure out a work around?

[Hristo Valyavicharski]

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

[Al]

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

[Shinu]

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.

[Al]

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

[Ivan Zhekov]

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

[Al]

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

[Ivan Zhekov]

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