Wrap Promoted Links Tiles

July 9, 2014 — 2 Comments

When you use the promoted links app in SharePoint 2013 you will notice that the default behavior is to run the tiles off the right of the screen and show paging buttons(below) image

This is because the CSS class ms-promlink-body is set to a width of 10000px. Not sure why they did this but there is a quick fix for it.

Option #1 – Recommended

Add the following override to your style sheet.

.ms-promlink-body {
max-width:100%;
}

.ms-promlink-headerNav{
display: none;
}

Note: This will affect all promoted links apps.

Option #2 – Script Editor

  1. Go to your Tiles.aspx view for your promoted links list.
  2. Select the Gear –> Edit Page
  3. Add a script editor web part to the page.
  4. Add the code snippet below to fix the width.

<style type=”text/css”>

.ms-promlink-body {
max-width:100%;
}
.ms-promlink-headerNav {
display: none;
}
</style>

Note: This will only affect the current promoted links app.

Important: Because we are adding a web part to a default list view page SharePoint treats this as a modified application page. Due to this, when we view the page the Item/List tabs are missing. To get them to show we must click inside the List(Tile) view web part to activate the button in the ribbon. This can be done by clicking on some white-space within the actual web part.

Result:

image

 

{Kam}

Advertisements

2 responses to Wrap Promoted Links Tiles

  1. 

    .ms-promlink-body {
    max-width:100%;
    }
    .ms-promlink-headerNav {
    display: none;
    }

    This is not working

    Like

  2. 

    Great thanks! Better than the JavaScript I have used previously. Do you happen to know how change the size of the hover tile in the tile or the opacity so that it can not be seen?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s