Strange styling issue

6 posts, 0 answers
  1. Philip
    Philip avatar
    13 posts
    Member since:
    Nov 2011

    Posted 05 Dec 2011 Link to this post

    Has anyone noticed an odd styling issue with this control where the white background from the input area stretches out right past where it should so that it not only envelopes the up/down arrows, but also the right border of the input box? I turned off my entire style sheet so that I had no styles being rendered on the site except those from including the Kendo UI css files, and nothing changed. All the other Kendo UI controls are rendering fine on this page.

    UPDATE:  It was actually a width setting in a style tag on the <input> container that I had set. If I remove it, it renders normally. Is there anyway to specify the width of this control?
  2. Leandro de los Santos
    Leandro de los Santos avatar
    1 posts
    Member since:
    Mar 2010

    Posted 07 Dec 2011 Link to this post

    Hi, i have the same problem. Any work arround?
  3. V N
    V N avatar
    7 posts
    Member since:
    Sep 2009

    Posted 07 Dec 2011 Link to this post

    I had the same problem, which I narrowed down to width property being set in the input style. I changed it to max-width and it fixed it.

    <input id="custom" value="10" style="max-width:180px"/>

    This seems like a bug to me.
  4. Dimo
    Dimo avatar
    8485 posts

    Posted 13 Dec 2011 Link to this post

    Hi all,

    The problem is caused by incorrect handling of the NumericTextBox' width style. The widget takes it into consideration and applies it to its client-generated wrapper element, however, does not remove it from the original <input> element.

    We will fix that. In the meantime, the easiest immediate workaround to use is:

    .k-numerictextbox  .k-input
        width: 100% !important;

    All the best,
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Sergiu
    Sergiu avatar
    16 posts
    Member since:
    Jun 2012

    Posted 20 Jul 2015 in reply to Dimo Link to this post

    I was able to overcome this issue with fairly minimal CSS modification as follows:

    .k-textbox > input,
    .k-autocomplete .k-input,
    .k-picker-wrap .k-input,
    .k-numeric-wrap .k-input,
    .k-dropdown-wrap .k-input,
    .k-selectbox .k-input {
         margin-bottom: 2px !important;
    .k-autocomplete.k-state-default .k-input, .k-combobox .k-state-default .k-input, .k-picker-wrap.k-state-default .k-input, .k-numeric-wrap.k-state-default .k-input, .k-multiselect-wrap, .k-slider-track, .k-slider-selection, .k-progress-status-wrap

       -webkit-box-shadow: none !important;
       box-shadow: none !important;

  6. Kevin
    Kevin avatar
    2 posts
    Member since:
    Oct 2015

    Posted 24 Mar 2016 in reply to Dimo Link to this post

    This worked for me! Thanks!!
Back to Top