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

[iCognition]

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

See attachment.

(Chrome)

[Dimo]

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

[iCognition]

That's not working.

Can we get an ETA on when that will be fixed? 

[Dimo]

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

[Vesselin Obreshkov]

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...

[Dimo]

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