Web part tool pane positioning

Nov 26, 2014 at 1:06 AM
I have not been able to get a reliable positioning solution for hte web part properties tool panel dialog.

The Bootstrap 3 seems to conflict with any solutions tried. The ideal solution would be a draggable tool pane or at least a slide in, which doesn't interfere with our custom page layouts or master page.

Eric do you have a working solution that doesn't just right align to the content view and squash all your other web part zone columns (I have 5 zones on one row, so OTB the tool panel overlaps the last column).

I have tried:

http://www.codeproject.com/Tips/715945/SharePoint-Web-Part-ToolPane-Tweak
Disappears off screen and tweaking could not get it working.

http://kyleschaeffer.com/sharepoint/sharepoint-2013-web-part-tool-pane/

http://academy.bindtuning.com/make-sharepoint-2013-web-part-editor-draggable/
I can get the alignment up the top right no issue, however it does not drag.
The SP ribbon submenu bar will overlap (no z-index setting allows this to stay behind the toolpane).
When in this position floating top right, I lose the inner scroll on the panel and therefore when you open the tabs, you cannot see the web part properties below the fold.
Coordinator
Nov 27, 2014 at 1:55 AM
Hi,

I have not personally used any of these specific techniques so I am not sure why they are not working for you. My technique it so load js when in edit mode. When in edit mode, I look for the web part tool pane. If I find the primary wrapper ID that is used to wrap the entire web part tool pane, I move it out of the table that SP creates and move it to a child of s4-workspace. I also add my own class to the toolpane so it is easier to target with my own css. I give this toolpane a position of absolute.

Now for more JS. I bind a dragable jquery library to this toolpane and if it doesn't work, then there is a problem how I am binding the dragable library and I use the console.log to trace my work.

Eric
Nov 28, 2014 at 1:25 AM
Hi Eric,

So this is all done through javascript.

I understand how to run that in a page layout detecting Edit mode.

How would I make it apply to other non-publishing pages - I am not use to applying "Edit only logic" in a master page?

Anita