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

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.



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