This is a migrated thread and some comments may be shown as answers.

Change Autocomplete TextBox style

9 Answers 455 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Vitantonio
Top achievements
Rank 1
Vitantonio asked on 23 Jul 2012, 09:48 AM
Hi,
I want delete the span wrapper in input box autocomplete...
how ?

Thanks

9 Answers, 1 is accepted

Sort by
0
Lukas
Top achievements
Rank 1
answered on 25 Oct 2012, 08:54 AM
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
0
Lukas
Top achievements
Rank 1
answered on 25 Oct 2012, 09:33 AM
A temporary solution for "unstyling" your autocomplete textbox could be this:
 
$("#autoComplete")
.kendoAutoComplete({...})
.removeClass('k-input')          
.parent()
.removeClass();


DropDown still remains style though
0
Amorphous2010
Top achievements
Rank 1
answered on 26 Apr 2013, 09:29 PM
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...
0
Wei
Top achievements
Rank 1
answered on 11 Jun 2013, 08:18 AM
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?
0
Dimo
Telerik team
answered on 11 Jun 2013, 11:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eric
Top achievements
Rank 1
answered on 08 Sep 2015, 05:01 PM
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?
0
Dimo
Telerik team
answered on 09 Sep 2015, 02:43 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eric
Top achievements
Rank 1
answered on 09 Sep 2015, 04:28 PM
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?
0
Dimo
Telerik team
answered on 14 Sep 2015, 05:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
AutoComplete
Asked by
Vitantonio
Top achievements
Rank 1
Answers by
Lukas
Top achievements
Rank 1
Amorphous2010
Top achievements
Rank 1
Wei
Top achievements
Rank 1
Dimo
Telerik team
Eric
Top achievements
Rank 1
Share this question
or