Easy way to display promoted links (tiles) on multiple rows

April 24th, 2014 | Posted by Marijn in branding | css | customization | free | Office365 | sharepoint | SharePoint 2013

A client wanted to display some quicklinks in the promoted links tiles. We had 8 links, on a page with 2 columns. By default you cannot add rows in the webpart.

promoted no rows

There are some tutorials out there, that need you to add dozens of lines ofjQuery, javascript or other forms of script. A much easier way to do this was given on StackExchange: just limit the space of the body in CSS.

Every tile has a default of 160px, so when you want to show rows of 3 items, just limit the space to 3*160 = 480px.

Simply add a content editor or script editor to the page and add this code:

<style>
/*display rows of 3 items*/
.ms-promlink-body {
      width: 480px;
}
</style>

If you also have buttons on top (when you have more items in the row than can be shown on the page), you can add this part to the script to remove those buttons:

<style>
/*hide the arrows when you have more items than viewable*/
.ms-promlink-header{
display:none;
}
</style>

The result is this:
promoted rows

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

21 Responses

  • Thank you for sharing the post. It helped me.

  • THANK YOU SO MUCH! THIS IS JUST WHAT I NEEDED. Pardon the caps but it just shows how excited I am.

  • Gabi says:

    If you want to be flexible and receive a responsive layout you could also set the width to 100%.

    /*hide the arrows when you have more items than viewable*/
    .ms-promlink-header{
    display:none;
    }
    .ms-promlink-body {
    width: 100%;
    }

    I added this css to the alternateCSS in those site collections where I only want to have a multiple lines promoted links and never the one with the “pages”.

  • Carike says:

    Thank you so much for sharing this. This is exactly what I needed. Keep up the great work.

  • John says:

    So very simple and worked first time. Saved me a lot of angst.

  • Hari Kiran says:

    Hi wanted add space between tiles on same web part example i have 7 web part like DDDDDDD
    on same web part but i want to arrange this as DDDD DDD. I tried all the possibilities but nothing work, Please help to get ride of this.

    Harry

    • Marijn says:

      hmmm… good question. This script is only to show it on multiple rows, never played with the with myself.
      I am not a good developer, so I don’t see the solution right now. Will try it out when I have time 😉

    • Hemme says:

      you might try adding two columns. The first column would have a width of four tiles and the second column a width of three tiles. Each column has to have its own scripteditor to achieve the DDDD DDD format.

  • Alexander says:

    Hi,
    this is always changing, if I change something at the site. Has anyone the same problem?

    Alex

  • Cath says:

    Hi Mirjan, This is perfect! The problem I’m having is that if I edit the page in any other way or make changes elsewhere in the site, the formatting of the promoted links goes back to one straight line even though the script you provided is still in the script editor section. Do you know how to fix?

  • Paula Lippe says:

    This works, but after I save the page from edit mode, it pulls up the page with only the first 3 promoted links viewable. The other rows disappear. If I go back into edit mode, I see them on multiple rows like I want. What setting do I need to change?

  • Pingback: Anonymous

  • Kim says:

    I got my promoted link wrapping works only on the edit mode. When I clicked save and viewed the page, it only showed one row instead of 2 rows. I have 9 tiles. Can someone tell me what I did wrong please?
    Thanks,
    Kim

  • ugo says:

    i have 40 promoted links (in rows with 6 links by row). Sharepoint display only 30. how to display all my promoted links ? tnx

    • Marijn says:

      The reason why is that the view by default has a max of 30 items, just like any list/library. The issue here is that you can’t change the promoted links view… So I think you need to look at a workaround. A possible one is doing it via a search results webpart where you “search” for the items in the list, and change the display template to have it look like promoted links. A way to achieve this is written in this blog.

    • FOUAD says:

      Hi, I have the same problem. Do you found any solution already? Please let me know because it’s urgent for me

  • lowrider says:

    Is there a way to dynamically adjust number of tiles when resizing browser or using phones/tablets that have a lower resolution ?

  • Tahirah Wheeler says:

    I added this code and it somehow made everything on the page disappear. Is there a way to get it back?

    • Marijn says:

      Wow! That is not supposed to happen! What you can try is to go to the site pages library, locate your page, go via the … to the version history and go back a version.

  • Yannick says:

    I have the same problem as mentioned above some times: Every time I save the page after editing the script there is still just one row displayed. Please help me. I realy rage about it right now.



Leave a Reply

%d bloggers like this: