The out-of-the-box matserpage en page layouts of SharePoint 2013 in SharePoint Online are not very usefull when it comes to making them responsive to smaller screens; Especially when working with webparts and webpart zones. In an attempt to solve such issues I found Savvior (pun intended).

What is Savvior?

Savvior is a jquery plugin based on Salvatorre. With Salvatorre we didn’t have much control on when and how the re-distribution of columns was initiated; especially irritating with the asynchronous nature of Content Search Webparts and display templates. Savvior solves this problem.

Why not Masonry?

Masonry is a popular jquery plugin that compensates ‘gaps’ that arise as we work with floating objects and columns. I found, working with SharePoint, that the content editors have no control on how Masonry re-distributes webparts among the columns; resulting in webparts ending up in places on the screen I didn’t want them to.

What’s the plan?

I wanted to get the following effect:

<img>

How to set up Savvior?

For this to work we actually only create 2 webpart zones instead of three. Savvior is only applied to the webparts in the first column. Webparts in the first zones are divided into two column; creating the 3 column effect.

<script>

Then we add some nifty css and some high level math in calculating margins and padding to evenly distribute columns on the screen.

<css>

Any SharePoint specific tweaks?

Although there is much control on how content is re-distributed, some feedback of user was that they still needed more control on how webparts where distributed among the columns. SharePoint allows content editor to hide and/or minimize webparts.

So I chose to use Faux webparts; webparts that don’t have any content, but are added to the zones. Savvior takes these webpart into account when re-distributing the webparts among the columns, thus allowing to control in which column certain webparts would end up.

Due to the wonderful CSS of SharePoint  we need to compensate a little for the fact that minimized webparts actually don’t take up space.

The following script allows us the identify either closed or minimized webparts.

<script>

With the new classes available we can then compensate for the SharePoint styling.

 .my_css{ color:red; } 

Do I need to fix other stuff?

In edit mode there are still a webpartzone contains an extra div for the “Add webpart” button. I fixed this problem by repositioning the add button outside of the zone. Savvior has an “filter” option but using that option would remove the add button.

How to add Savvior to the SharePoint solution?

I won’t go in to the best way to add Savvior to you SharePoint project. But the most clean solution for me was to add them to the control display template so the scripts and calls are only applied when the actual display templates / webparts are used.

<snippet>