dragging cloud items

3 posts, 0 answers
  1. Morten
    Morten avatar
    335 posts
    Member since:
    Jul 2012

    Posted 02 Apr 2012 Link to this post

    I'm using jQuery UI to make cloud items draggable. However, dragged items dissappear under the cloud container. I've tried setting z-index on item parents but can't get it right.

    I was hoping you could suggest a possible road to a solution where cloud items would appear on top of everything else.

    Please see code snippets belos and attached screen shots.

    $(function () {
      $('li.rtcTagItem a').draggable({ zIndex: 2701, revert: true });
  2. Slav
    Slav avatar
    1359 posts

    Posted 04 Apr 2012 Link to this post

    Hello Morten,

    Setting the z-index of the dragged RadTagCloud item will ensure only that it will be displayed above the others. The RadTagCloud has a CSS property overflow: hidden; applied by default, which hides the overflowing content, including the items. You can override this rule by placing the following code snippet in the head section of your page:
    <style type="text/css">
            overflow: visible !important;

    Keep in mind that this is a customization of the RadTagCloud and as such it is not supported, because it could lead to an unexpected behavior is some scenarios. Also, the tag cloud control is not designed to include dragging functionality, so it is possible that you encounter difficulties after applying such modifications.

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Morten
    Morten avatar
    335 posts
    Member since:
    Jul 2012

    Posted 05 Apr 2012 Link to this post

    thanks alot Slav. Your tip did the trick and I accept the un-supported-ness of the solution.
Back to Top