Using EditModePanel to Solve Web Part Overlay Issue

Technologies: SharePoint 2013, Online; SharePoint Designer 2013

Client Requirement

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.

View web part overlap issue image.

Master Page

In my quest to resolve this issue, I noticed that when performing a Bing or Google search on the keywords of EditModePanelEditModePanelShowInEdit 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

Page Layouts

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.

<PublishingWebControls:EditModePanel runat=”server”>
<!– 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”/>
<style type=”text/css”>
#DeltaPlaceHolderMain {
      float:none; width: 1500px; background-color:white }
</style>
</PublishingWebControls:EditModePanel>

 Testing

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.

Feedback

Let me know if you found this helpful for your project. Leave your comments about this article or reply to kerdirks@yahoo.com 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.
Kerry

Advertisements
This entry was posted in Master Page, Page Layouts, SharePoint Designer, Web Parts. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s