This is a migrated thread and some comments may be shown as answers.

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

5 Answers 59 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
iCognition
Top achievements
Rank 1
iCognition asked on 10 Oct 2013, 04:14 AM
All skins, seems to happen when number pickers are embedded in TabStrips and ComboBoxs when in KendoWindows.

See attachment.

(Chrome)

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Oct 2013, 10:45 AM
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!
0
iCognition
Top achievements
Rank 1
answered on 11 Oct 2013, 12:48 AM
That's not working.

Can we get an ETA on when that will be fixed? 
0
Dimo
Telerik team
answered on 11 Oct 2013, 06:25 AM
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!
0
Vesselin Obreshkov
Top achievements
Rank 2
answered on 18 Nov 2013, 05:17 PM
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...
0
Dimo
Telerik team
answered on 19 Nov 2013, 07:45 AM
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!
Tags
General Discussions
Asked by
iCognition
Top achievements
Rank 1
Answers by
Dimo
Telerik team
iCognition
Top achievements
Rank 1
Vesselin Obreshkov
Top achievements
Rank 2
Share this question
or