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

Weird CSS issue with up/down arrows in Chrome

3 Answers 231 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
JohnVS
Top achievements
Rank 1
JohnVS asked on 04 Jul 2013, 09:32 PM
We're using KendoUI v2013.1.514 and Twitter Bootstrap, and this issue seems to be noticeable in Chrome 27 (couldn't duplicate behavior in IE10). The behavior is also noticeable on your demo page at http://demos.kendoui.com/web/numerictextbox/index.html .

I have a NumericTextBox in a Kendo Window. Everything works great, except I noticed that it was difficult to click on the down arrow of the NumericTextBox. I started clicking to find where the boundary was, and as you can see from my image attachment, the pointer was many pixels above the down arrow but was still registering the click on the down arrow. What is causing the down arrow to take up so much more clickable area than the up arrow? Do I need to fix something, or is this a Kendo issue?

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Jul 2013, 05:26 AM
Hi John,

The mentioned online demo seems to work as expected in Chrome 27. Please take a look at the attached video and let me know if I am missing something. The behavior is the same also with the Bootstrap Kendo UI theme.

http://screencast.com/t/6PdVtT2lUi


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JohnVS
Top achievements
Rank 1
answered on 19 Jul 2013, 09:11 PM
Hi Dimo, thanks for the reply. Sadly, in the video, you clicked everywhere except in between the up and down arrows, which is where I was noticing the strange issue. :)

On the demo page in Chrome 27, click near the top of the down arrow, then keep moving your cursor up 1 pixel and click again. You should notice that your cursor is a few pixels into the area of the up arrow, but the click event is still activating the down arrow. The screenshot I attached is showing how far up the cursor can be but still register on the down arrow. I went to a separate computer with Chrome 27 to eliminate it being just my computer as well.

Basically, it appears that the "middle area" in between the up and down arrows will always register to the down arrow, while it seems it should obviously be split between the two arrows.

If you need any further explanation, let me know. Thank you.
0
Dimo
Telerik team
answered on 22 Jul 2013, 08:47 AM
Hi John,

Indeed, I am able to click on the down arrow while the mouse cursor is 1-2 pixels over the top arrow, however, I don't see a valid reason for this, so I suppose this is some browser behavior. Generally, a similar effect can be observed on touch devices, where the touch target is a little off with regard to the finger location on purpose.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
NumericTextBox
Asked by
JohnVS
Top achievements
Rank 1
Answers by
Dimo
Telerik team
JohnVS
Top achievements
Rank 1
Share this question
or