Make SharePoint 2013 web part editor draggable

sp2013
By default SharePoint web part editor is static and sometimes the web part and the editor are not visible at the same time. To change this behavior I came across this solution originally developed by Matthew Koon which I tweaked a little to work both with BindTuning themes and the original Seattle theme.

SharePoint default theme

To get this working with the original SharePoint theme you will need JQuery, JQuery UI, a custom script and also a custom CSS. You can download all these resources here.

Once you have all the files, you can follow these steps:

  1. Open your site with SharePoint designer
  2. Extract the NewSeattle folder from the zip and copy it to All Files > Style Library
  3. Select the folder, and check it in. If asked, publish the major version
  4. Extract the NewSeattle.master and copy it to All Files > _catalogs > master page
  5. Select the master, check it out and then check it in. If asked, publish the major version
  6. On your SharePoint site go to Settings > Site Settings > Master Page, if you don’t have the master page option under look and feel you need to first activate the publishing features
  7. Set the NewSeattle.master as your master page
  8. NewSeattle

  9. To test it edit one of your pages, edit a web part and drag the tool pane

BindTuning themes

With BindTuning themes you will need the JQuery UI, a custom script and a custom css, which you can download here.

Once you have all the files, you can follow these steps:

  1. Open your site with SharePoint designer
  2. Extract the BindTuning folder from the zip and copy it to All Files > Style Library
  3. Select the folder, and check it in. If asked, publish the major version
  4. Navigate to All Files > _catalogs > masterpage >YourThemeName
  5. Check out the master page you are using and edit it in advanced mode
  6. Search for
  7. Above it paste the following code
  8. Save the master page, check it in and, if asked, publish the major version
  9. Refresh your browser using CTRL + F5
By | 2017-05-04T14:08:19+00:00 December 2nd, 2013|Articles|1 Comment

About the Author:

Web developer focused on SharePoint branding, blogger, tech enthusiast. Traveling and sports are my addictions, knowledge and success are my daily motivations.

One Comment

  1. Ralf Happe June 5, 2014 at 2:52 pm - Reply

    I added the files in the Master Page. In the webpart.css I only had the line:
    “$(‘.ms-ToolPaneBody’).css(‘max-height’,tpHeight+’px’);” change to:
    $(‘.ms-ToolPaneBody’).css(‘max-height’,’auto’);
    to make it work correctly.

Leave A Comment

Captcha * Time limit is exhausted. Please reload CAPTCHA.