SharePoint custom master pages and the page edit consoles
Taken from my old blog at http://souls-end.spaces.live.com on 30/11/2007
So back to something SharePoint related, and I have to thank Heather Solomon for providing me with the solution to this annoying problem (check her blog out at http://www.heathersolomon.com/blog/, she knows her stuff – especially when it comes to branding SharePoint). Anyway, the issue is to do with when you are coming up with a new master page for a MOSS 2007 site, and you are starting from scratch (or using the minimal master page provided by MS). You might find that when you look at your pages, they look fine – until you go into edit mode and you get the web part properties window appearing at the bottom of your page instead of the right side, and your content just goes all over the place.
The problem is caused by the WSSDesignConsole control (and also the PublishingConsole according to Heather, but I didn’t have this issue as I have put mine onto the page differently I think). This control would normally look like this in your master page:
<!– Edit console that appears in page Edit mode –>
<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
</asp:ContentPlaceHolder>
<!– Publishing console control –>
<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
<wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
</asp:ContentPlaceHolder>
<!– Publishing console control –>
This will give you the little toolbar with the exit edit mode link, but the problem is caused by the HTML that this little guy renders. It was designed to fit within a default SharePoint master page, with its HTML around it in all the tables based glory that it is. So what they did here is to start the edit toolbar with a <tr> tag instead of its own <table> tag – Hence the havoc that you will see on the page when you put this one on if your tables are different to those in a standard MS master page, or you have a non tables based layout. The solution is simple though, just put the thing inside a <table> tag, like so:
<!– Edit console that appears in page Edit mode –>
<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
<table><wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/></table>
</asp:ContentPlaceHolder>
<!– Publishing console control –>
<asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
<table><wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/></table>
</asp:ContentPlaceHolder>
<!– Publishing console control –>
And just like that your problems are solved. Now you can also set some properties of the table, like a border, width, height, or whatever else you want. An easy fix for an annoying problem. Thanks to Heather for making a post about it as well, I was ready to rip my hair out trying to figure out what I was doing wrong!
Thanks man i was almost pulling my hair out until i found you’r article.