RadAutoCompleteBox CSS width property not working

[Yan Moura]

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!

[Doncho]

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:

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

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

• Improve Your Debugging Skills with Chrome DevTools
• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

Kind regards,
Doncho
Progress Telerik

[Yan Moura]

Yeah, it worked perfectly! Thank you, Doncho, for putting a light over that!