Category

SharePoint 2013 comes with many handy features and pre-installed elements to create and design your own webpages. Once you created your lists and added your data it is very easy to put the elements together to get individual pages with all the collated information you require.

Often this is all you want to do and you have got nothing to worry about, but there are times when you want to change some predefined elements to adjust them to your own needs. As you’ll see this isn’t always as easy as it seems in the beginning.

One pretty nice thing in SharePoint 2013 are the Promoted Links. Such lists can be displayed as Tiles with a background-image, a title and a short description, which fits in really nicely with the modern design of Windows (Phone) 8.x apps. One unfortunate behavior I discovered while using the Promoted Links on multiple sites was that if the container in which it is embedded isn’t wide enough to display all Tiles on one line horizontally, they will not be wrapped i.e. the overflowing elements do not get automatically placed on a new line.

So on the plus side it works, but the esthetic feeling has gone missing a bit hasn’t it?

Luckily it seems that we are not alone with this opinion and you will find a TechNet article that uses scripts like these, in which you can set the number of tiles in a row. This was a good starting point but unfortunately didn’t fit my needs. I wanted the tiles to wrap dynamically without having to know how big the window is, how much the user zooms in or out it should always wrap as soon as it runs out of space to render the tiles.

So it’s time to roll up the sleves and dig into CSS. The CSS for the container of the tiles does not wrap them automatically. But there are classes that actually do implement the behavior that we are looking for. All we need are a few lines of JavaScript lines you can replace the relevant class with the one that’s working:

 $(document).ready(function () { 
     // we don't need the header anymore, no cycling through links 
     $('.ms-promlink-root > .ms-promlink-header').empty();
     $(".ms-promlink-body").addClass("ms-comm-cat-body"); 
     $(".ms-comm-cat-body").removeClass("ms-promlink-body");
});

That’s all you need make your Promoted Links wrap.

So while I was pulling my hair out and discussing the problem with my co-workers suddenly noticed that on our Community-Page the tiles are wrapping the way I intended for the Promoted Links. So after some tinkering with the CSS the whole Promoted Links issue vanished 🙂

So why am I doing it with JS and not in the CSS or HTML? It would be much prettier and less work to do.
The answer is pretty simple: I didn’t know where to do it and I didn’t want to change the default behaviour of the elements. If someone knows how to do this in a better way please enlighten me in the comments.