DevTools for .NET

Not answered Problem with z-index

Sathish

Posted on Jan 19, 2012 (permalink)

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

Reply

Max

Posted on Mar 15, 2012 (permalink)

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.

Reply

Max
Posted on Mar 20, 2012 (permalink)

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.
Attached files
- dropzoneF.PNG
Reply

Max

Posted on Mar 23, 2012 (permalink)

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

Reply

Max

Posted on Mar 26, 2012 (permalink)

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.

Reply