Why are autocompletes so hard to style?

[Dave]

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?

[Kiril Nikolov]

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

[Dave]

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? 

[Kiril Nikolov]

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

[Dave]

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.