Can't grab and drag SPAN handler

2 posts, 0 answers
  1. Lisa
    Lisa avatar
    20 posts
    Member since:
    Feb 2014

    Posted 24 Nov 2014 Link to this post

    We have a kendo sortable listview object, and the definition and styles for the handler are given below.  The handler span contains a span which renders as the drag icon.  It looks fine, but the icon and row cannot can not be dragged.  If the inner span is replaced by text or a non-breaking space, it works fine.  

    The icon we want to use is in a SVG sprite.  I tried styling the handler itself as the icon but it isn't possible to center the icon in the handler that way.

    Is it possible to do what we are attempting to do?  Thank you!


    Handler HTML:

    <span class="handler">
      <span class="icon icon-drag icon-drag-dims"></span>
    </span>


    Styles:

    .handler {
      border-right: 1px solid #eaeaea;
      width: 40px;   
      height: 44px;
      display: inline-block;
      text-align: center;
    }
     
    .handler .icon {
      vertical-align: middle;
    }
     
    .icon {
        display: inline-block;
    }
     
    .icon-drag {
        background-position: 0 -391px;
        background-repeat: no-repeat;
        background-image: url(../../images/sprites/icons.svg);
    }
     
    .icon-drag-dims {
        width: 21px;
        height: 21px;
    }



























  2. Lisa
    Lisa avatar
    20 posts
    Member since:
    Feb 2014

    Posted 25 Nov 2014 in reply to Lisa Link to this post

    Never mind.  Our HTML/CSS designer was able to solve it through CSS.
  3. Kendo UI is VS 2017 Ready
Back to Top