SharePoint 2013 Web Part Tool Pane

This is going to be a short one. The “tool pane” in SharePoint 2013 has been causing me some headaches. In this version of SharePoint, the tool pane often appears inside your site’s design layout, instead of off to the side of the entire document. In a fixed-width layout, this definitely causes some issues due to a lack of space for web part zones, sidebars, and other content to fit into the space that is available.

This fix is rather simple. Instead of displaying the tool pane within your site’s layout, a few lines of CSS can fix the tool pane to the top-right corner of your browser window. Simply drop this into an attached style sheet and you’re good to go:

The Style:

#MSOTlPn_MainTD {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  height: 100% !important;
  width: auto !important;
  overflow-y: auto;
  background: #fff;
}
#MSOTlPn_MainTD > table{
  margin-right: 19px;
  position: static;
  width: 100%;
}
.ms-TPBorder {
  width: 100%;
}

2 comments

  1. Matthew says:

    Hey Kyle,

    I made some minor adjustments to the positioning and added a transparent background so you could see the ribbon and scrollbar. Also, if you’re using jquery-ui in your solution you could call “draggable” on that element in case you wanted to drag it out of the way of something.

    #MSOTlPn_MainTD {
    display: block;
    position: fixed;
    top: 73px;
    right: 10px;
    z-index: 1000;
    height: 100% !important;
    width: auto !important;
    overflow-y: auto;
    background: transparent;
    }

Post a comment

Your email address will not be published. Required fields are marked *