.k-numerictextbox and Bootstrap .input-group

[Scott]

First, thank you Telerik for putting together a Bootstrap-like theme for Kendo UI. It really helps. I have found an inconsistency:

When nesting the numeric text box control inside of an input group, the textbox is not formatted correctly.

<div class="input-group">
     <div class="input-group-addon">$</div>
     <input class="form-control" style="width:100%" type="number" /> 
</div>

 

Is there a way to get a similar display from the Kendo control without the input-group?

[Iliana Dyankova]

Hi Scott,

This outcome is not supported by Kendo UI NumericTextBox, however you could use additional CSS and try to modify the default outcome. A basic example is here.

Regards,
Iliana Nikolova
Telerik

 

 

[Scott]

Thanks Iliana. Does Telerik have any plans to include such CSS in a future version? It seems to make sense in the Bootstrap theme.

[Iliana Dyankova]

Hi Scott,

We don't have plans to include this CSS because it is actually customization of the default Kendo UI NumericTextBox outcome.

Regards,
Iliana Nikolova
Telerik

 

 

[Michael]

I have to agree with Scott on this one.  With your Bootstrap theme, your form elements should default to 100% width, which is a Bootstrap convention, and should not get the 12.4em width that you have set in your css for k-numerictextbox (among many other kendo controls as well).  From what I have found so far, we have to resort to overriding yours, or finding elements with jquery, and setting the width, which feels like a hack.  You​ responded "because it is actually customization of the default Kendo UI NumericTextBox outcome"...yes, that is exactly what we are asking, because that is the Bootstrap convention.  Maybe I am just missing something here?

[Michael]

Well, I found this, which may help:

http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#using-the-form-control-bootstrap-css-class-with-kendo-ui-widgets

I have not tried it quite yet, but will make sure we have this added to ours, particularly for the width.

 

[Tim]

+1 my vote to have this defect fixed - 100% width for bootstrap kendo form elements. I put the bootstrap css after the kendo bootstrap to take care of most basic form elements but the special kendo elements still need to be overridden with width: 100%. Not sure where the design size of 12.4em came from but it breaks convention with bootstrap design layouts. Seems a simple thing to support bootstrap users. So far I'm able to get away with a local form style simply using:

.k-widget { width: 100%; }