.k-numerictextbox and Bootstrap .input-group

7 posts, 0 answers
  1. Scott
    Scott avatar
    18 posts
    Member since:
    Mar 2015

    Posted 14 Apr 2015 Link to this post

    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?

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 16 Apr 2015 Link to this post

    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
     
    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. Scott
    Scott avatar
    18 posts
    Member since:
    Mar 2015

    Posted 16 Apr 2015 in reply to Iliana Nikolova Link to this post

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

    Posted 17 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Michael
    Michael avatar
    43 posts
    Member since:
    Dec 2010

    Posted 24 Jul 2015 in reply to Iliana Nikolova Link to this post

    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?

  7. Michael
    Michael avatar
    43 posts
    Member since:
    Dec 2010

    Posted 24 Jul 2015 in reply to Michael Link to this post

    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.

     

  8. Tim
    Tim avatar
    18 posts
    Member since:
    Jul 2014

    Posted 09 Apr in reply to Michael Link to this post

    +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%; }

Back to Top
Kendo UI is VS 2017 Ready