How to remove the border of RadAutoCompleteBox?

3 posts, 1 answers
  1. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 05 Jun 2013 Link to this post

    hi,
    I need to show only tokens in single html row. 
    How can I remove the border of RadAutoCompleteBoxx control? Not the border of tokens!.
    I tried with following css class "ReadOnlyAutoCompleteBox", but it didn't work.

    [Markup]
    <telerik:RadAutoCompleteBox ID="AutoCompleteBox1" runat="server" 
    InputType="Token" Width="280" CssClass="ReadOnlyAutoCompleteBox" Enabled="false" >
    <Entries>
    <telerik:AutoCompleteBoxEntry Text="Token 1" />
    <telerik:AutoCompleteBoxEntry Text="Token 2" />
    <telerik:AutoCompleteBoxEntry Text="Token 3" />
    </Entries>
    </telerik:RadAutoCompleteBox>

    [Css]
    .ReadOnlyAutoCompleteBox {
        outlinenone!important;
        border-stylenone!important;
        border-width0px!important;
    }


    Thanks in advanced.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Jun 2013 Link to this post

    Hi Robin,

    To remove the border of the RadAutoCompleteBox, try overriding the default CSS as follows.

    CSS:
    <style type="text/css">
        .RadAutoCompleteBox_Default .racTokenList
        {
            border-color: transparent !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robin
    Robin avatar
    41 posts
    Member since:
    Sep 2012

    Posted 05 Jun 2013 Link to this post

    Thans for the reply Shinu, 
    Your provided codes worked perfect.
    But I changed a little bit like below because of my autoCompleteBox was disabled (Enabled="false").

    .RadAutoCompleteBox_Metro .racDisabled{
        border-color:transparent!important;
    }

    Thanks.
Back to Top