Setting Promoted Links to wrap on the page

Anyone who’s implemented a SharePoint 2013 site and used the Promoted Links web part to provide a nice, clean navigation has, no doubt, found this a welcome addition when needing a quick, graphical navigation.

However, add more tiles than the width of the page allows and the overflow will become obscured – necessitating the scroll buttons to be used to get to the hidden links.  That is, frankly, terrible.  Wouldn’t you think that this situation would be better if these tiles wrapped onto the next line?  Wouldn’t that be more, erm, intuitive?

Well you’re not the only one.  And many have thought the same.  There are a few solutions to this floating around the webbage.  Here’s mine:

function setPromLinks() {
    try {
        if ($('.ms-promlink-root')) {
            $('.ms-promlink-root').each(function () {
                try {
                    var wpidDec = $(this).attr('id');
                    var wpid = wpidDec.split('{')[1];
                    wpid = wpid.split('}')[0];
                    var width = $('div[webpartid=' + wpid.toLowerCase() + ']').width();

                    $(this).width(width).show().find('.ms-promlink-body').width(width + 10);
                }
                catch (err) {
                    document.getElementsByClassName('ms-promlink-root').style.display = 'block';
                }
            });
        }
    }
    catch (err) {
        document.getElementsByClassName('ms-promlink-root').style.display = 'block';
    }
}

_spBodyOnLoadFunctionNames.push('setPromLinks');

Link the function into your master page and also include the following css to hide those horrid buttons.

.ms-promlink-header {
    display: none;
}
.ms-promlink-root {
    display: none;
}

It should be noted that the CSS will hide the whole Promoted Links web part content from the off, it being displayed when the script executes.  So the additional error catching is to make sure it’s displayed should jQuery not be available.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *