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

How to remove the border of RadAutoCompleteBox?

5 Answers 328 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 2
Robin asked on 05 Jun 2013, 08:46 AM
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.

5 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 05 Jun 2013, 09:28 AM
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.
0
Robin
Top achievements
Rank 2
answered on 05 Jun 2013, 09:52 AM
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.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 26 May 2020, 05:35 PM
the provided solution no longer removes the border completely. In the bootstrap skin, a top border is still shown. Is there a way to remove the border completely?
0
Doncho
Telerik team
answered on 29 May 2020, 01:27 PM

Hi Albert,

To define which are the CSS styles you need to override in order to achieve the desired custom appearance of the control, you can use the Browser's Developer Tools to inspect the rendered HTML elements and the styles they have applied.

The first two points of the Improve Your Debugging Skills with Chrome DevTools blog post could help you with the process.

When you have defined the styles that need to be overruled you can apply the new styles using a more specific CSS selector than the one used for applying the built-in styles. More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

 

A possible cause for the described could be the additional box-shadow applied to the RadAutoCompleteBox by Bootstrap skin. If so you may need to override that style as well

You can try:

.RadAutoCompleteBox.RadAutoCompleteBox_Bootstrap .racTokenList{
    border-color:transparent;
    box-shadow:none;
}

 

I hope this will prove helpful!

Kind regards,
Doncho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 02 Jun 2020, 03:56 PM
that worked. Thank you.
Tags
AutoCompleteBox
Asked by
Robin
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Robin
Top achievements
Rank 2
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Doncho
Telerik team
Share this question
or