Matthew Yarlett: Drag'n'drop Error within a DocumentSet

I came across a strange bug yesterday. I couldn't drag files into the Documents webpart within a DocumentSet.

When I tried dragging documents onto the page, the normal "Drop here..." dialog wasn't shown, and dropping the document wouldn't upload the file to SharePoint.

After a little experimenting (on both Office 365 and SharePoint 2013 on prem) it seems to be a bug in the SharePoint CSS.

The bug is manifested only when you change the webpart chrome from Default to Title Only or Title and Border for the documents webpart.

(Why would you do that anyway? I had a requirement to display the documents webpart title, showing the label "Supporting Documents".)

To workaround this bug, add some CSS to a Content Editor webpart, that re-positions the "Drop here..." div. If you only want that CSS, skip to bottom.

So here is how you work around it... mostly in pictures!

1. Drag'n'drop in a normal Document Set - works fine

2. Change the Webpart chrome to display the Webpart Title

3. Try the drag'n'drop again... Ahhgg! It doesn't work anymore!

4. If you zoom the page out, you'll notice that the Drag'n'drop box is further down the page and off to the right... what the?

5. With a little element inspection, we can see that Drag'n'drop div has some values set for the Top and Left properties.

These values are causing the div the be misplaced when the parent div (for the webpart) contains another child div, which appears in the HTML layout flow before the Webparts contents div (where the Drag'n'drop div lives).

In this case, that child div is the Webpart title container.

6. To fix this issue, all we need to do is:

a). Change the position CSS property for the Webparts "contents" div to Relative. This is requred because the Drag'n'drop div has a position value of absolute - an absolute position element is positioned relative to the first parent element that has a position other than static. See http://www.w3schools.com/css/css_positioning.asp for more info.

b). Override the Left and Top CSS properties on the Drag'n'drop div, with new values.

We can achieve this through a couple of CSS selectors that target these two div's. All we need to do is add the CSS to the page.

7. Add the CSS the page by adding a new Content Editor webpart, editing the source, and adding the new CSS styles.