k-textbox primitive width smaller than other widgets

5 posts, 0 answers
  1. Drew
    Drew avatar
    3 posts
    Member since:
    Apr 2012

    Posted 19 Apr 2012 Link to this post

    The k-textbox primitive is not the same width as the combobox, dropdownlist, or numeric textbox. It would be nice if all the kendo primitives/widgets gave a uniform look out of the box.
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 21 Apr 2012 Link to this post

    Hello Drew,

    Thanks for the suggestion, seems we missed to make it the same width as opposed to height. The fix will appear in the next internal builds and the service pack. Meanwhile you can use this override to fix it:
    html .k-textbox
    {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 2.12em;
        line-height: 2.12em;
        padding: 2px .3em;
        text-indent: 0;
        width: 12.4em;
    }

    I've also updated your points for the find.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    1 posts
    Member since:
    Oct 2012

    Posted 02 May 2012 Link to this post

    I saw this, then added the override CSS... plus the text cursor, well look at 'k-textbox.jpg'

    Not quite what I was expecting, I was kinda expecting it to look like autocomplete (just without the functionality). Look at 'autocomplete.jpg' for reference.
    Could you please provide that style code?

    Thank you in advance.
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 03 May 2012 Link to this post

    Hi Andrew,

    To shrink the cursor in Chrome, just change line-height to 1.6em. However styling a simple input to have a border like the AutoComplete has, is a task that is close to impossible. There are two approaches which have their cons:
    - Mimic the AutoComplete structure - a span wrapper with classes .k-autocomplete, .k-widget, .k-header and input in it with class .k-input (not .k-textbox). This approach involves wrapping all your input elements but looks exactly like the AutoComplete widget (minus the hover effects).
    - Use box shadows - with 2 inset shadows the .k-textbox can get a border similar to the one AutoComplete has, but without the gradiented look. However box shadows in IE9+ get too rounded due to their different shadow algorithm. We can almost fix that with even more box shadows and even add a hover. The downside of this method is that IE7 and 8 don't support box shadows. Anyway, the rules needed are:
    .k-textbox
    {
        .box-shadow(~"inset 0 0 0 2px @{header-background-color}, inset 2px 2px 0 1px @{shadow-inset-color}, inset -2px -2px 0 1px @{shadow-inset-color}, inset 2px -2px 0 1px @{shadow-inset-color}, inset -2px 2px 0 1px @{shadow-inset-color}");
    }

    .k-textbox:hover
    {
        .box-shadow(~"inset 0 0 0 2px @{hover-background-color}, inset 2px 2px 0 1px @{shadow-inset-color}, inset -2px -2px 0 1px @{shadow-inset-color}, inset 2px -2px 0 1px @{shadow-inset-color}, inset -2px 2px 0 1px @{shadow-inset-color}");
    }


    Add these to template.less and use our fork of LESS (or LESS 1.2.x, but not 1.3) to generate the skins (or just remove the LESS parts and replace the color variables).

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 03 May 2012 Link to this post

    Hello Andrew,

    Our LESS 1.2 fork is here, better use that.

    Regards,
    Kamen Bundev
    the Telerik team
    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