NumericTextBox with "display: flex;" div

3 posts, 0 answers
  1. Norbert
    Norbert avatar
    1 posts
    Member since:
    Aug 2014

    Posted 03 Sep 2014 Link to this post

    Hi,

    as upgrading from the open source core version 2014.1.318 to the new version of 2014.2.716, we encountered a small problem with the css.
    Using "display: flex;" on the container DIV, the input inside it changed to a 2 row high field after calling ".kendoNumericTextBox()".

    CSS:
    #container{float: left; display: flex;}

    HTML:
    <div id="container">
       <
    input id='numBox' type='number' class='' value='0'/>
     </
    div>


    JS:
    $("#numBox").kendoNumericTextBox({
      decimals: 1,
      format: "#",
      max: null,
      min: null,
      onChange: function(e) {
        console.log(e);
      },
      spinners: true,
      step: 1
    });

    As you can see here: http://jsbin.com/yiwusumujino/1/edit

    To solve this problem this CSS code should be added:
    .k-numeric-wrap { display: flex;}

    This shouldn't be handled inside Kendo UI?

    Thanks,
    Norbert
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 05 Sep 2014 Link to this post

    Hi Norbert,

    Thank you for pointed our attention to this issue - I forwarded this enquiry to the developers for further discussions and will write you back as soon as I have any information on the subject.

    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. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 09 Sep 2014 Link to this post

    Hi Norbert,

    We discussed the case and what would suggest is to wrap the input element from which the NumericTexBox is initialized into a <div> element. For your convenience here is the modified example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top