ComboBox, NumberPicker and other (?) widgets missing bottom border

6 posts, 0 answers
  1. Matt
    Matt avatar
    66 posts
    Member since:
    Apr 2012

    Posted 09 Oct 2013 Link to this post

    All skins, seems to happen when number pickers are embedded in TabStrips and ComboBoxs when in KendoWindows.

    See attachment.

    (Chrome)
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Oct 2013 Link to this post

    Hi Matt,

    The issue seems to be caused by a browser bug and is related to the page zoom level, the specific HTML output inside the Window, and the values in the CSS rule below. We are aware of this problem but we have not come across a good and universal way to prevent the glitch. You can try fiddling with the styles to achieve an acceptable behavior in your specific scenario.


    .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
    {
       height: 1.65em;
       line-height: 1.65em;
       padding: .177em 0;
    }


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Matt
    Matt avatar
    66 posts
    Member since:
    Apr 2012

    Posted 10 Oct 2013 Link to this post

    That's not working.

    Can we get an ETA on when that will be fixed? 
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Oct 2013 Link to this post

    Hello Matt,

    The styles above are applied with the values shown. I was suggesting you to try changing the values, although this does not guarantee achieving a perfect solution.

    I am afraid I cannot provide a timeframe for resolving this issue, as we are not able to find out a logical and predictable scheme to reproduce the problem. For example, the following demo works as expected:

    http://demos.kendoui.com/web/grid/editing-popup.html

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 18 Nov 2013 Link to this post

    I am experiencing the same issue as well. Only in Chrome. Very annoying. On a single page I would have the multiple instances of the same widgets and some would have their bottom border but others won't. Tried messing around with different themes, tried playing with the padding and line heights as suggested but no luck. Has something to do with sizing issues but can't get to the bottom of it. The only thing I have figured out so far is if I set the font-size of my body css definition to 1em (which in my case makes fonts way too big) then widgets render correctly. As soon as I decrease the body font-size even with 0.05 em this happens. Also, I seem to notice this more frequently when using the MVC wrappers but it happens with pure JS/declarative initialization as well. I wish it was something that could be isolated easier...
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Nov 2013 Link to this post

    Hello Vesselin,

    You can try experimenting with a zoom style:

    .k-popup-edit-form
    {
        zoom: 1.05;
    }

    You will notice that depending on the set value, some widgets may look OK and others may be broken.


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready