Wrap Promoted Links Tiles

When you use the promoted links app in SharePoint 2013 you will notice that the default behavior is to run the tiles off the right of the screen and show paging buttons(below)

This is because the CSS class ms-promlink-body is set to a width of 10000px. Not sure why they did this but there is a quick fix for it.

Option #1 – Recommended

Add the following override to your style sheet.

.ms-promlink-body {
max-width:100%;
}

.ms-promlink-headerNav{
display: none;
}

Note: This will affect all promoted links apps.

Option #2 – Script Editor

1. Go to your Tiles.aspx view for your promoted links list.
2. Select the Gear –> Edit Page
3. Add a script editor web part to the page.
4. Add the code snippet below to fix the width.

<style type=”text/css”>

.ms-promlink-body {
max-width:100%;
}
.ms-promlink-headerNav {
display: none;
}
</style>

Note: This will only affect the current promoted links app.

Important: Because we are adding a web part to a default list view page SharePoint treats this as a modified application page. Due to this, when we view the page the Item/List tabs are missing. To get them to show we must click inside the List(Tile) view web part to activate the button in the ribbon. This can be done by clicking on some white-space within the actual web part.

Result:

 

{Kam}