2

I have tried every way I know how (and failed) to properly set the width on a kendoAutoComplete. My latest attempt (below) is JS based, but I've also tried numerous CSS solutions.

The issue I'm seeing is that no matter the width I choose, the actual input area remains a consistent width, and then there is a weird gray area to the right:

enter image description here

Here's the hover state (the gray box disappears):

enter image description here

But don't be fooled by the appearance of a large text box. Here's what happens when you begin to type:

enter image description here

I've tried:

var autoComplete = $("#gridFilter").data("kendoAutoComplete");
autoComplete.list.width(400);

And

autoComplete .wrapper.css("width", "300px");

And...various CSS solutions.

Why must it be so hard to set the width of a silly auto complete? What am I missing here?

I want the width of my auto complete to be 100% to fill its container.

Bonus points if you can help me understand why Telerik consistently makes me want to hurt myself.

EDIT

OK, I've (partially) figured it out. I temporarily removed bootstrap CSS from the page and the input works as expected.

If I find the offending CSS, I'll post an answer here.

James Hill
  • 60,353
  • 20
  • 145
  • 161
  • How did you set it up? Is it any different than the 100% width kendoAutoComplete [in this example](http://dojo.telerik.com/IHOji)? – Jaqen H'ghar Apr 11 '17 at 16:14
  • I see no difference whatsoever. – James Hill Apr 11 '17 at 16:41
  • _"Why Telerik consistently makes me want to hurt myself?"_ Because with great features comes great ... At this exacty moment Uncle Ben was shoot, by him self. To fix this, try to transphorm or redirect your anger to them! – Drag and Drop Apr 12 '17 at 09:33

1 Answers1

1

As mentioned in the edit above, default Bootstrap CSS was conflicting with the styling. Specifically, the max-width property. The CSS below fixed it:

<input id="gridFilter" style="max-width: 10000px; width:100%;" />
James Hill
  • 60,353
  • 20
  • 145
  • 161