1

enter image description here

Want to arrange the tiles in 5 a row without adding a new web part as these are shown in one web part using choice filter. Need to do this to reduce user side scrolling and unnecessary clicks.

  • Is it a promoted links web part on a classic site? – Kasper Bo Larsen Jul 12 '18 at 14:47
  • Yea its a home page, I'm maintaining the site and am only changing the call link to a new promoted list that is showing these tiles on the page the user clicks on(home screen). The promoted list is sorted by choice column so creating another web part below it is not going to be the best option. – Mario Nicholas Jul 12 '18 at 15:01
0

You can set the number of tiles shown in one row and make the tiles break into new rows by this script.

Just copy the script to a text file. Save it and drag it into your SharePoint site - e.g. into SiteAssets.

Copy the URL of the file uploaded to SharePoint.

Edit your page showing the tiles. Add a Content Editor Web Part CEWP. Edit the web part and in web part properties paste the URL to your text file.

Now your tiles show up in rows of three - or what count you have set in the script shown below (line 6).

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

// Set number of tiles per row HERE
var numberOfLinksPerRow = 3;

// variables
var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var post = "'></div></td></tr>";
var numberOfLinksInCurrentRow = numberOfLinksPerRow;
var currentRow = 1
// find the number of promoted links we're displaying
var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;
  // if we have more links then we want in a row, let's continue
  if (numberOfPromotedLinks > numberOfLinksPerRow) {
    // we don't need the header anymore, no cycling through links
    $('.ms-promlink-root > .ms-promlink-header').empty();
    // let's iterate through all the links after the maximum displayed link
    for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {
      // if we're reached the maximum number of links to show per row, add a new row
      // this happens the first time, with the values set initially
      if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
        // i just want the 2nd row to
        currentRow++;
        // create a new row of links
        $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
        // reset the number of links for the current row
        numberOfLinksInCurrentRow = 0    }    
// move the Nth (numberOfLinksPerRow + 1) div to the current table row    
$('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));    
// increment the number of links in the current row
    numberOfLinksInCurrentRow++;  }
}
});
</script>

If this solves your problem - please mark as answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.