Rounded Corners for RadInput

34 posts, 0 answers
  1. Al
    Al avatar
    4 posts
    Member since:
    Oct 2013

    Posted 17 Oct 2013 Link to this post

    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
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 22 Oct 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    4 posts
    Member since:
    Oct 2013

    Posted 22 Oct 2013 Link to this post

    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
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 25 Oct 2013 Link to this post

    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.
Back to Top