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

Can't Change AutoCompleteBox Size/Font/etc.

6 Answers 389 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Lynn
Top achievements
Rank 2
Lynn asked on 23 Nov 2014, 11:21 PM
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

6 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 25 Nov 2014, 11:10 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
zznbilly
Top achievements
Rank 1
answered on 06 Aug 2015, 08:03 AM
And what about changing the font size of the popup list? I have tried everything with no effect, unfortunately :(
0
Dimitar
Telerik team
answered on 10 Aug 2015, 10:19 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
zznbilly
Top achievements
Rank 1
answered on 10 Aug 2015, 11:21 AM
Thanx a lot Dimitar. You're a genius :)
0
Bupa Arabia
Top achievements
Rank 1
answered on 05 Jun 2020, 04:56 PM

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;
}

0
Vessy
Telerik team
answered on 10 Jun 2020, 03:47 PM

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

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.
Tags
AutoCompleteBox
Asked by
Lynn
Top achievements
Rank 2
Answers by
Boyan Dimitrov
Telerik team
zznbilly
Top achievements
Rank 1
Dimitar
Telerik team
Bupa Arabia
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or