Change Autocomplete TextBox style

[Vitantonio]

Hi,
I want delete the span wrapper in input box autocomplete...
how ?

Thanks

[Lukas]

I'd like to second that request.

Your basic themes look real nice but we don't use and fancy styling on our website at all and I'd like to implement the Autocompletebox
with as less styling is possible.

Is there a way to get rid off the span wrapper and/or apply any theme which holds only CSS information for postionion and stuff without coloring and round borders.

Or is the only way to achieve this to edit the Kendo script and CSS files?

thanks

[Lukas]

A temporary solution for "unstyling" your autocomplete textbox could be this:

 
$("#autoComplete")

.kendoAutoComplete({...})

.removeClass('k-input')          
.parent()
.removeClass();

DropDown still remains style though

[Amorphous2010]

I tried that temporary solution, and it seems to make the width of the dropdown shorter than the width of the textbox. Is there anything that someone from Telerik can recommend to change the styling for this component? It's actually pretty annoying that there is little to NO documentation on what CSS classes to change...

[Wei]

Is this issue had been closed??
I have the same touble that I need to use Autocomplete textbox with my own textbox style...
How should I do?

[Dimo]

Hello,

In addition to what Lukas has suggested, the widget's wrapper <span> (i.e. the parent element of the textbox) should have the following styles applied:

display:inline-block; border:0; background:none; box-shadow:none;

These will ensure that the widget does not apply its hover / focused styles.

Generally, there are two ways to modify the Kendo UI widgets' styling:

+ use the Kendo UI ThemeBuilder for color modifications
+ override rules from the theme CSS or the common CSS
+ directly modify the theme CSS or the common CSS file

Very specific scenarios such as the currently discussed one are not supported out-of-the-box, as they are quite rare.

Any style customizations require some level of CSS knowledge (especially about CSS specificity), as well as familiarity with Firebug or a similar browser developer tool.

Regards,
Dimo
Telerik

[Eric]

We also are facing the same issue.  We want to use KendoUI but we cannot have any fancy styling.  Is there a default css file w/out fancy styling?

[Dimo]

Hello Eric,

Fancy styling can be a subjective and vague definition, so I am not sure what aspects of the styling you are referring to. For example, there are themes with brighter colors and themes will fewer and less bright colors. There are also themes with rounded corners and ones without rounded corners. My recommendation is to pick the theme, which is as close to your preferences as possible, and further modify it with the ThemeBuilder and/or manually. The ThemeBuilder can be used to modify the theme's color scheme. For sizing-related changes, you will need to make manual changes to the CSS code.

http://docs.telerik.com/kendo-ui/web/appearance-styling

http://docs.telerik.com/kendo-ui/themebuilder

http://demos.telerik.com/kendo-ui/themebuilder/

Regards,
Dimo
Telerik

[Eric]

Thanks Dimo.  Yes I realize that fancy probably wasn't the right adjective to describe what I mean.  How about this.  I want to use KendoUI without any styling at all.  That being said, I'm sure some styles are required for the auto-complete background and the date/time control graphics but, I don't want any colors or fonts.  Is that possible at all or do I have to do it all by hand?

[Dimo]

Hi Eric,

Please use the ThemeBuilder to create a custom theme with only black and white colors. Kendo UI themes do not define specific fonts, except for PDF export.

Regards,
Dimo
Telerik