Workaround for Single Row Display Issue of Promoted Links Web Part in SharePoint

Priyaranjan K S

SharePoint 2016Promoted Links Web PartSingle Row Display issue

8 Comments

Join the conversation! Your thoughts help the community grow.

Jason Hunt7y ago
Hi, I have tried this, it works, to an extent but for some reason I have 7 tiles and I have set it to be 960px which looks good as there will be more tiles added later however I have a horizontal scroll bar on the top of the tile area, is there a way to remove this? Thanks
Jason Hunt7y ago
Thanks, I will have a go at this tomorrow. I was going to have two sets of PL's and manually code them into a table, your way seems much easier, may I ask how do you centralise your Tiles too?
Santhakumar Munuswamy11y ago
Good one
Sibeesh Venu11y ago
Nice Share
Nilesh Jadav11y ago
Good work sir !
Rupali Shinde11y ago
nice 1, hope you are going to explore more in SharePoint :)
Priyaranjan K S11y ago
Thanks Harshad Pansuriya
Harshad Pansuriya11y ago
Nice one

SharePoint 2013 has introduced a new list template called Promoted Links List where we can store important links. Later this list can be shown as a Tile View Web part in the page. I have written an article here on how to do it. However the resulting web part generates a horizontal scroll to the right if the number of items exceed 6 which downgrade the look and feel of the web part. This behavior is present in SharePoint 2016 as well.

This article discusses two ways to workaround this issue and display the items in multiple rows thereby avoiding the use of horizontal scroll bar.

Method 1: jQuery Approach

We can place the jQuery script in the page and force the contents to be displayed in multiple rows rather than a single row. Let’s see how to do that. Open the page in edit mode:

From ‘Insert’ menu select ‘Web Part’.

Select the ‘Script Editor’ Web Part and add it to the page.

This would place the script editor in the page. Click ‘Edit Snippet’ in the ‘Script editor’ and place the following code into it.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var singleRowItems = 4;
var beforeTag = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var afterTag = "'></div></td></tr>";
var presentRowLinkCount = singleRowItems;
var presentRow = 1
var totalCount = $('.ms-promlink-body > .ms-tileview-tile-root').length;
if (totalCount > singleRowItems) {
$('.ms-promlink-root > .ms-promlink-header').empty();
for (i = singleRowItems + 1; i <= totalCount; i++) {
if (presentRowLinkCount == singleRowItems) {
presentRow++;
$('.ms-promlink-root > table > tbody:last').append(beforeTag + presentRow + afterTag);
presentRowLinkCount = 0
}
$('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (singleRowItems + 1) + ')').appendTo($('#promlink_row_' + presentRow));
presentRowLinkCount++;
}
}
});
</script>

Now click on ‘Insert’ in the script editor and save the Web Page. We will see that the tiles are aligned in multiple rows. You can change the Variable singleRowItems in the above script to the number of items you would prefer in a single row.

Method 2 – CSS Approach

The size of each tile in the Promoted Links Webpart is 160px . So if we set the promoted links web part body width to (160*X)px, x is the number of tiles in one row, the web part will resize itself vertically. Thus causing the tiles to realign downwards.

Thus if you want 3 tiles in one row the webpart size will be 160*3= 480px . If you want it to be 4 per row the size would be 160*4=640px. Now you can place the following CSS in the Script Editor window (navigate to the script editor just like we did in method 1).

<style>
.ms-promlink-body {
width: 480px;
}
</style>

Click on’ Insert’ and ‘Save’ the page.

The Tiles will now be aligned in multiple rows.

aligned

Thus we have seen the jQuery and CSS approach to workaround the Single Row display issue of Promoted Links Tiles View Web Part.