Technologies: SharePoint 2013, Online; SharePoint Designer 2013
Recently I’ve been working with a client on their O365/SharePoint Online intranet. The requirements were such that the Master Page for the home page had a restricted width of approximately 1200px versus simply letting the text and web parts flow the expanse between the left and right margins.
This restriction often causes an issue with web parts overlaying each other when the page is being edited; and more specifically, when the web parts on the page are being modified or configured via the web part properties panel that appears to the right of the page body. The good news is that there is a simple solution that takes just a few minutes to implement and resolves the web part overlay issue.
In my quest to resolve this issue, I noticed that when performing a Bing or Google search on the keywords of EditModePanel, EditModePanelShowInEdit and EditModePanelShowInRead, the end result inevitably pointed to the Master Page as “the” place to add the corrective code. The following link was a great example.: https://msdn.microsoft.com/en-us/library/office/jj822364.aspx
At the end of the road, I found that the custom page layouts were the final destination for this solution.
One of the great features with SharePoint 2013/Online is the untapped capabilities of the ‘EditModePanel’. This control is very versatile and can assist in the on-the-fly altering of a page layout to better suit the page in edit and display mode when a restricted width has been defined with the Master Page.
Depending on the type of page layout template used, there may already be a section related to the EditModePanel at the top of the template. When I saw that Microsoft had already included a workable example, i was very confident that the style statements were being included in the correct place and adhered to the overall standards of the SharePoint framework.
<!– Styles for edit mode only–> <SharePointWebControls:CssRegistration name=”
<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>” After=”<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>” runat=”server”/>
float:none; width: 1500px; background-color:white }
The above style statements worked flawless and allowed the width of the page body to be expanded only during the page editing mode. By default, the background color is a bright yellow and something most clients and users probably wont find to appealing.
Let me know if you found this helpful for your project. Leave your comments about this article or reply to firstname.lastname@example.org with additional questions regarding your project.
A special thanks to all the bloggers whose articles I traversed in my quest for a simplistic solution. And a special thanks to Heather Solomon for her great article and assistance at the end of my journey.