Problem with z-index

10 posts, 0 answers
  1. Sathish
    Sathish avatar
    15 posts
    Member since:
    Dec 2010

    Posted 19 Jan 2012 Link to this post

    Hi,

    I'm experiencing this issue where you drag and drop files, but before you drop, if you press the Esc key while the files are dragged over... so before you release your mouse to drop, if you press escape, the ruDropzone div is on top and remains on top. The upload control is not shown anymore.

    This is reproducible in the online demo as well... any work around for this issue?

    http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx?product=asyncupload


    Thanks.

    sathish
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 25 Jan 2012 Link to this post

    Hello Satish,

    Thanks for pointing this out. I've logged in into our bug tracking system and we will try to get it resolved for the upcoming Q release. I am afraid there is no quick workaround though. I've also updated your telerik points for the report.

    All the best,
    Genady Sergeev
    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. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 15 Mar 2012 Link to this post

    Hi,
    side problem with z-index is when there are other controls behind radupload/dropzone e.g. radasyncupload in a contextmenu of radwindow.
    ContextMenu has dynamic index of say 7000. When I try to dropdown files there (onto RadAsyncUpload) they drop ok, however ruDropZone div in the moment of hovering with the file changes z-index from -1 to 2 thus breaking the desired effect as shown in the example provided by Sathish in his 1 post.
  4. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 20 Mar 2012 Link to this post

    Hello Max,

    RadWindow does not have integrated context menu. Could you please elaborate on what is your exact scenario?


    Kind regards,
    Genady Sergeev
    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.
  5. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 20 Mar 2012 Link to this post

    Hi Genady!

    Take a look at the attached image.
    Expected Behavior: when you HOVER a file over the DropZone (behind AsyncUpload with "drop file here" line) RadAsyncUpload should be *hidden* BEHIND that DropZone as in example on http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx?product=asyncupload

    Actual Behavior: DropZone won't go top level. RadAsyncUpload is on top in spite of hovering file.

    Async goes as Control in ContextMenu: ContextMenu.Controls.Add(AsyncUpload);
    The behavior is being observed in RADWINDOW.
  6. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 23 Mar 2012 Link to this post

    Hi Max,

    Unfortunately we are not able to reproduce the problem locally. Could you please specify which ContextMenu do you have in mind, because as Genady said, the RadWindow control does not have a CotextMenu of its own. And without properly reproducing your case, we can only speculate on what the fix to this issue might be. It would be helpful if you could provide the code for the RadWindow and AsyncUpload, and where exactly it's declared.

    However since this seems to be an issue related to the z-index of the drop area, you could try setting it to higher value. Try the following and see if that solves your issue:
    .RadUpload_Default .ruDropZone
    {
        z-index: 9999;
    }


    Greetings,
    Bozhidar
    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.
  7. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 23 Mar 2012 Link to this post

    public class MyControl : HtmlGenericControl
    {
        private RadAsyncUpload AsyncUpload;
        private RadContextMenu ContextMenu;
     
        public void InitializeComponent()
        {
            TagName = "div";
            Style.Add(HtmlTextWriterStyle.Height, "200px");
            Style.Add(HtmlTextWriterStyle.Width, "200px");
            AsyncUpload = new RadAsyncUpload();
            ContextMenu = new RadContextMenu();
            ContextMenu.Controls.Add(AsyncUpload);
            ContextMenu.Targets.Add(new ContextMenuControlTarget { ControlID = ClientID });
            Controls.Add(ContextMenu);
        }
    }

    .ruDropZone { width: 205px; height: 20px; background-color: #f0f0f0; border: 1px dashed #CCCCCC; border-radius: 5px; margin: -28px 0 0 -5px; padding: 28px 0 0 5px; z-index: X; }


    Nothing special, just RadContextMenu and AsyncUpload
  8. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 26 Mar 2012 Link to this post

    Hello Max,

    We've tried to reproduce the issue, but to no avail. I've attached the sample page I used to test your scenario. Could you verify if the problem reproduces with this page on your end?

    If it doesn't, please modify the page so that the problem occurs and send it back to us, so that we can investigate the issue locally. If the modified code is too much to be pasted here, please open a support ticket and attach the page to it.
     
    Regards,
    Bozhidar
    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.
  9. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 26 Mar 2012 Link to this post

    Hello, Bozhidar,

    you were wrong in not attaching provided CSS style. The issue is reproduced. However I cannot upload ZIP here.

    Put, please, in the head of Default2.aspx:

    <style type="text/css">
            .ruDropZone { width: 205px; height: 20px; background-color: #f0f0f0; border: 1px dashed #CCCCCC; border-radius: 5px; margin: -28px 0 0 -5px; padding: 28px 0 0 5px; }
        </style>

    Regards.
  10. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 29 Mar 2012 Link to this post

    Hello Max,

    I've managed to reproduce the issue with the current official version of the controls. Since the release of this version we have made improvements in the styles of the drop zone, which resolve this issue. You can get the fixed version if you download the latest internal build, or if you upgrade to the upcoming ServicePack, which will be available in the middle of next month.
     
    Greetings,
    Bozhidar
    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.
Back to Top