Change Autocomplete TextBox style

10 posts, 0 answers
  1. Vitantonio
    Vitantonio avatar
    24 posts
    Member since:
    Mar 2012

    Posted 23 Jul 2012 Link to this post

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

    Thanks
  2. Lukas
    Lukas avatar
    2 posts
    Member since:
    Oct 2012

    Posted 25 Oct 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Lukas
    Lukas avatar
    2 posts
    Member since:
    Oct 2012

    Posted 25 Oct 2012 Link to this post

    A temporary solution for "unstyling" your autocomplete textbox could be this:
     
    $("#autoComplete")
    
    .kendoAutoComplete({...})
    .removeClass('k-input')          
    .parent()
    .removeClass();


    DropDown still remains style though
  5. Amorphous2010
    Amorphous2010 avatar
    4 posts
    Member since:
    Aug 2009

    Posted 26 Apr 2013 Link to this post

    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...
  6. Wei
    Wei  avatar
    1 posts
    Member since:
    Mar 2013

    Posted 11 Jun 2013 Link to this post

    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?
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Jun 2013 Link to this post

    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!
  8. Eric
    Eric avatar
    2 posts
    Member since:
    Dec 2012

    Posted 08 Sep 2015 in reply to Dimo Link to this post

    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?
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Sep 2015 Link to this post

    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!
  10. Eric
    Eric avatar
    2 posts
    Member since:
    Dec 2012

    Posted 09 Sep 2015 in reply to Dimo Link to this post

    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?
  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 14 Sep 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready