Can't Change AutoCompleteBox Size/Font/etc.

[Lynn]

I am trying to use the AutoCompleteBox on the home page of a real estate web site.  I want the users to be able to enter a city name, zip code, MLS number, etc. and have the AutoCompleteBox identify the item to be searched and continue with the search processing.

The problem I am having is trying to change the textbox height, width, font, etc.  It seems to always revert back to a default size.  I seem to be able to change the width, but no other properties.  And in its default size, the AutoCompleteBox is just way too small on a home page to attract the users' attention.

Does anyone know how I can accomplish these changes?

Please note: I have already eliminated the RadFormDecorator from the page so there is no issue caused by it.

Thanks in advance!

Lynn

[Boyan Dimitrov]

Hello,

Indeed there is a property only for setting the RadAutoCompleteBox width value.
For height and font size you have to use css in order to change them. In the code snippet below I tried to summarize the selectors and properties that you will need set in order to change the RadAutoCompleteBox height and font size:
//css

html .RadAutoCompleteBox .racInput {height, line-height, font-size}
html .RadAutoCompleteBox {font-size, line-height}

Regards,
Boyan Dimitrov
Telerik

 

 

[zznbilly]

And what about changing the font size of the popup list? I have tried everything with no effect, unfortunately :(

[Dimitar]

Hi,

The popup is an element rendered outside the RadAutoCompleteBox. You may use the following selector to change its font-size:

html .racSlide .RadAutoCompleteBoxPopup {
    font-size: 2em;
}

Regards,
Dimitar
Telerik

[zznbilly]

Thanx a lot Dimitar. You're a genius :)

[Bupa Arabia]

Kindly need help, i am using the below css to change the font size however screenshot attached after selecting in the item font size are not fitted inside in the selected.

html .RadAutoCompleteBox .racInput {
    font-family: sans-serif;
    font-size: 1.5em;
    height: 30px;
    width: 1000px !important;
}



html .racSlide .RadAutoCompleteBoxPopup {
    font-size: 1.5em;
}

[Vessy]

Hi Bupa,

The suggestion given by Dimitar targets the Lightweight rendering of the control, while the AutoComplemete in the attached image seems to be rendered in classic rendering. The Elastic capabilities of RadAutoComplete are available only in Lightweight render mode, thus you will need to switch to it in order to utilize them (all controls on the page must have the same render mode):

https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes

<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1"> </telerik:RadAutoCompleteBox>     

Regards,
Vessy
Progress Telerik