Why are autocompletes so hard to style?

5 posts, 0 answers
  1. Dave
    Dave avatar
    35 posts
    Member since:
    Oct 2012

    Posted 23 Aug 2013 Link to this post

    90% of stuff I try to do with autocompletes is eliminated after the page is done loading. Why?

    I try setting in-line CSS styles... most are removed after page load.

    I try jQuery like so:
    $('.autocomplete').css('width', width);
    $('.autocomplete).css('background-color', '#eeeeee');
    The width persists, but only after there's a visible width change on-screen after page load.

    The background color is eliminated after page load.

    What do I need to do to have these autocompletes stop flipping out and just take the styles I give them?
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 23 Aug 2013 Link to this post

    Hi David,

    Have you tried using CSS rules to style your widgets? Maybe something like this:

    http://jsbin.com/EReSEqi/1/edit

    Setting CSS with JavaScript/jQuery will always be overwritten when the page is reloaded from the default CSS styles, so it an expected behaviour, to use the styling set with jQuery on reload.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Dave
    Dave avatar
    35 posts
    Member since:
    Oct 2012

    Posted 27 Aug 2013 Link to this post

    Let me try this again, as your forum just ate my reply without posting it, as it commonly does (I should know better and copy my post to the clipboard before hitting send... silly me.)

    I still cannot set the widths of the autocompletes. An inline style of "width: 100%" is being applied to all my autocompletes. I've disabled ALL CSS in my app, as well as ALL non-Kendo javascript, and this is still occuring.

    @(Html.Kendo().AutoCompleteFor(m => m.Contact)
          .MinLength(3)
          .HtmlAttributes(new { @data_url = Url.Action("GetUserPhoneNumber", "Ajax"), @readonly = true })
          .DataTextField("Key")
          .Template("#=Key# #if (Value != ''){# (#=Value#)#}#")
          .Events(e => e.Select("selectContact"))
          .DataSource(ds => ds.Read(r => r.Action("SearchUsers", "Ajax").Type(HttpVerbs.Post)).ServerFiltering(true)))
    <input name="Contact" class="input-validation-error k-input" id="Contact" role="textbox" aria-disabled="false" aria-haspopup="true" aria-readonly="true" aria-owns="Contact_listbox" style="width: 100%;" type="text" readOnly="readonly" data-val="true" data-url="/Ajax/GetUserPhoneNumber" data-role="autocomplete" data-val-required="Please enter a Contact." jQuery191016846771651872994="23" autocomplete="off" aria-autocomplete="list" value="David Selinger"/>
    <style scoped>
      .k-widget.k-autocomplete.k-header.k-state-default{
        width:50px !important;
      }
       
      #Contact{
        background-color:#eee;       
      }
    </style>
    Background color works, though.

    So, what is going on here? And why can't you guys just put a fluent .Width attribute on the HTML Helpers? 
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 29 Aug 2013 Link to this post

    Hi David,

    Are you sure that you are placing the style tag on the correct place. I can see you are using <style scoped> which affect only elements placed in its parent. 

    As for the AutoComplete - the widget consists of a span element, holding the input. The input has width set to 100% so it can take the whole span holding it. So if you want to change the width, you will need to actually change the width of the span element holding the input and it will automatically reflect the input.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dave
    Dave avatar
    35 posts
    Member since:
    Oct 2012

    Posted 30 Aug 2013 Link to this post

    Well, I can't style this width through the span. It's not working.

    I can style the width of the k-input class, which is a bad solution. And it still causes the autocomplete widths to visibly change after page load in IE8, which is unacceptable. Video attached.

    It seems the quality of the answers here in the forum are below those of the support tickets, so I'll just close this and go open a ticket. And perhaps together we can solve the terribly complex issue of setting a Kendo AutoComplete's width.
Back to Top
Kendo UI is VS 2017 Ready