Nov 8, 2011

Fixing the Edit Mode for Web Part Properties

There's more ways to skin a cat than one, but after trying a few different ways to fix that annoying edit mode for web part properties, I found the fix I think is the nicest way to do it. Do what, are you asking?

When the SharePoint 2010 Master Page has a fixed width, say 1280px, the edit mode tends to break way too easily. The general edit mode might stay somewhat ok, depending, but the issue I'm attacking here is the Web Part properties window. Opening the Web Part properties is the ultimate layout break on a fixed width page. It either situates itself on top or behind the divs on the page, or pushes them down to where they're not supposed to be.

So how to fix this? Edit mode, with Web Part properties window open, is a table (with way too much paddings etc. to my liking, but usually it's not worth it to start fixing those). So I figured the easiest way to fix this problem is simply to manipulate the width of the table. Or a part of really. Basically eg. on that 1280px page this would work nicely:

#MSO_tblPageBody
{
width:1500px !important;
}

Only there's a couple other things to consider here too. First, the rule above works nicely on a page without the left navigation. But pitch in the left nav and the Web Part properties scoot a good 200-250px too much to the right, depending on the width of the left navigation. At least if you build your Master Pages in the same sharepointy manner as I do. So, you might want to make separate fixes for pages with and without the left navigation. As for me, I use my own class in the Master Pages to indicate this anyway, so it's easy to go a step further, eg.

div.no-leftnavigation #MSO_tblPageBody
{
width:1150px !important;
}

Additionally, depending on your page structure, you might need to adjust the display or positioning rules for your content divs in order for this to fly. But usually, no more complicated than this.

No comments: