Formatting with other styled controls

2 posts, 0 answers
  1. Alex
    Alex avatar
    43 posts
    Member since:
    Jun 2011

    Posted 25 Jul Link to this post

    I am trying to have the AutoCompleteBox fit in with the other controls on my form.  Note that the textbox is not style similarly to the other textboxes.  Is there some technique to obtain consistency?  

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Web20" />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
    <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" Skin="Web20"></telerik:RadAutoCompleteBox><br />
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

     

    The screenshot attached show first without the RadDecorator and then with (note that it does not make it better.

  2. Rumen
    Admin
    Rumen avatar
    13244 posts

    Posted 28 Jul Link to this post

    Hello,


    You can make the corners of RadAutoCompleteBox rounded with the help of highlighted CSS below:

    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <style>
            .RadAutoCompleteBox .racTokenList {
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" />
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Web20" RenderMode="Lightweight" />
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
            <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" Skin="Web20" RenderMode="Lightweight"></telerik:RadAutoCompleteBox>
            <br />
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
     
        </form>
    </body>
    </html>


    Kind regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top