Foundation for SharePoint - Drop target for drag/drop file upload appears slightly off page.

Nov 7, 2013 at 1:29 PM
If you navigate to a document library and attempt to use the drag/drop upload feature, the target box that appears is off the page to the right. Please see image below for more information. I tested in IE9 and Chrome 30.0.1599.101.

Oct 3, 2014 at 8:33 PM

Seems this post hasn't been updated for a long time. Anybody has a solution for this?

Appreciate the help. Thanks!

Oct 6, 2014 at 9:41 PM
The main body container I believe is setting its position to relative. This is causing SP's absolutely positioned div, the Drop Here div, to get positioned wrong.

I will see if we can get a fix for the framework, but I suggest reviewing what containers have positions set to relative and see if you can remove that. If not, check to see if you can set the position of the drop here overlay to left: 0; top: 0; and then make sure that you add a relative position to its parent.

Oct 7, 2014 at 4:01 PM
Thanks Eric. I will try to look into that.

Oct 8, 2014 at 9:38 PM

I can concur this is a step in the right direction. We had similar issues on our page. Ours was fixed by adding an inherit property to our CSS override file.





List aligned the box at the box of its parent container in our deployment.

Oct 10, 2014 at 5:15 PM

Thank you so much for your help. Your solution helped me have an idea of how to solve this.

Appreciate your help,
Oct 14, 2015 at 8:30 PM
I know this topic is a little old but I came across a solution to this problem that worked great for me.

I put this div right under the s4-workspace div in the masterpage as described in the link above and the positioning of drag and drop worked everywhere correctly.
<div id="ms-dnd-dropbox" style="display:none;">
     <span class="ms-attractMode ms-noWrap" id="ms-dnd-dropboxText" style="line-height: 108px;">Drop here...</span>
Oct 14, 2015 at 10:34 PM
Great find, thank you for sharing. I normally use the CSS hack but I like the idea of adding the dropbox div inline with workspace. I will try this next time.

Thanks again.

Dec 7, 2015 at 11:34 AM
Edited Dec 7, 2015 at 11:35 AM
The position:inherit!important; didn't work for me (using bs3 master from the wsp edition). I had to set the following, which over-rides the inline style that sharepoint is generating. I had a custom stylesheet inserted after the bootstrap css files in the master page. So far it seems to be working nicely.
/* fix for dropzone in wrong place on page layouts */
#ms-dnd-dropbox {
Eric, is there some place where all these css "fixes" are being documented other than discussions? I'm hesitant to create an issue without first having others confirm the fix.