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

RadAutoCompleteBox CSS width property not working

2 Answers 346 Views

AutoCompleteBox

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

Yan Moura asked on 27 Mar 2020, 01:55 PM

Hi,

I am trying to adjust the width of the input box but it's not working. Weirdly other properties work but I am not getting to reflect the changes in width.

My CSS code:

html .RadAutoCompleteBox .racInput {

font-family: sans-serif;

font-size: 1.2em;

height: 30px;

width: 1000px !important;

}

My aspx code:

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

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

autopostback="true" EmptyMessage="Type in data..."

DataSourceID="SqlDataSource1"

DataTextField="edesc"

DataValueField="ecode"

InputType="Token"

Width="450"

DropDownWidth="150px"

OnEntryAdded="RadAutoCompleteBox1_EntryAdded"

OnEntryRemoved="RadAutoCompleteBox1_EntryRemoved"

>

</telerik:RadAutoCompleteBox>

Notice that I define a default value of 450 in ASPX code but as far as I know the CSS should override it, correct? Anyway, I tried to remove the initial definition but CSS still won't work.

As I mentioned all other properties work fine but the "width" one. Any idea?

Thanks in advance!

2 Answers, 1 is accepted

Accepted

answered on 31 Mar 2020, 03:04 PM

Hello Yan,

The reason the override did not work was due to the CSS targeting the inner element instead of the wrapper.

When you inspect the rendered HTML elements, you can see that the width defined in the markup is applied for the wrapper (marked with yellow) and the input element itself is just sitting there having no special effect. (see marked with blue)

To fix the problem, apply the style on the wrapper itself:

.RadAutoCompleteBox {
    width:1000px !important;
}

Also, CSS Specificity plays a big role. Sometimes the specifics preventing you to override a CSS style/class. To find out more about specifics, check out the following articles:

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

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.