RadAutoCompleteBox CSS width property not working

3 posts, 1 answers
  1. Yan Moura
    Yan Moura avatar
    60 posts
    Member since:
    Feb 2010

    Posted 27 Mar Link to this post

    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. Answer
    Doncho
    Admin
    Doncho avatar
    43 posts

    Posted 31 Mar Link to this post

    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.
  3. Yan Moura
    Yan Moura avatar
    60 posts
    Member since:
    Feb 2010

    Posted 31 Mar Link to this post

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