Weird CSS issue with up/down arrows in Chrome

4 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 04 Jul 2013 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 05 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 19 Jul 2013 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 22 Jul 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready