k-textbox primitive width smaller than other widgets

[Drew]

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.

[Kamen Bundev]

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

[Andrew]

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.

[Kamen Bundev]

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

[Kamen Bundev]

Hello Andrew,

Our LESS 1.2 fork is here, better use that.

Regards,
Kamen Bundev
the Telerik team