How can we help you today?

How to make Simple-list, Image-list and File-list items display horizontally (side-by-side)

This article is deprecated. 

The horizontal alignment feature is available for ShortPoint lists elements starting from ShortPoint SPFx version 6.9.35.x. Click here to check and download the latest ShortPoint version. Please, refer to this solution article to get more details: Horizontal Alignment for ShortPoint Lists.


Before we start


In this article we will be working with an Image-list containing 6 items. We will make it so that up to 4 items are displayed side-by-side on each row. This solution is not limited to 4 items per row, later on in this article I will show you how to you can display up to 2, 3, 4, 5, 6, 7 or 8 items per row.


As you can see in the screenshot below, each item in the list is displayed below the previous item.


And here is a screenshot of how we want the list items to appear (we want up to 4 items to appear side-by-side):




Solution

The four step solution detailed below will work for any of File-list, Simple-list or Image-list.


Step 1.

Copy the CSS code snippet below. The CSS snippet below will display up to 4 items on each row. Code snippets for 2, 3, 5, 6, 7, 8 items per row has been included at the end of this article.

display: flex;
flex-flow: row wrap;

.shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
  display: block;
  width: 100%;
  overflow-x: hidden;
}

.shortpoint-listitem {
    box-sizing: border-box;
    flex-basis: 25% !important;
    width: 0 !important;
    margin-top: 0px !important;
    border-bottom: none !important;
    padding: 15px;
}

.shortpoint-listitem-wrap {
  margin-bottom: 0px !important;
}



Step 2.

Edit your page and click on the settings icon for any of either Simple-list, Image-list or File-list component.



Step 3.

Click on the custom CSS tab and paste the CSS snippet we copied earlier in the custom CSS text-box.



Step 4.

Click Update and save the page to view the updated Simple-list, Image-list or File-list component.




Code Snippets for different item number per row


Simply replace the code snippet in step 2 with any of the below:

  • 2 Items per row
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 50% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 3 items per row
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 33.33% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 4 items per row
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 25% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 5 items per row
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 20% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 6 items per row
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 16.667% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 7 items per row
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 14.2857% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 8 items per row
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 12.5% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }


Extra Tips


  • To increase or decrease the spacing between the list items, simply increase or decrease the number on line 15: padding: 15px; in any of the snippets above. So to increase the spacing, I could for example change 15 to 25 and that line becomes padding: 25px;and my snippet for up to four items per row would become:
    display: flex;
    flex-flow: row wrap;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }

    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 25% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 25px;
    }

    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • You might have noticed how only this line of code: flex-basis: 25% !important;, changes when we want to change the number of items per row. Specifically, only the percentage changed. The percentage represents 100 divided by the number of items you want to display on a row. So if you want to display up to 16 items on a row, simply divide 100 by 16, which will result in 6.25. So to display up to 16 items on one row, simply change that one line of code to flex-basis: 6.25% !important; 

  • Also you might want the image in each item to be centered. To achieve this, simply add the CSS snippet below to that of either 2,3,4,5,6,7 or 8 items per row.

    .shortpoint-listitem-wrap > div {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    }


  • If you need to sort the list items vertically like the following pattern:

    Item1  item3  item6
    item2  item4  item6


    you'll need to replace the above CSS with the following:

    column-count:3;
    column-gap: 0;

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
    display: block;
    width: 100%;
    overflow-x: hidden;
    }

    .shortpoint-listitem {
    box-sizing: border-box;
    margin-top: 0px !important;
    border-bottom: none !important;
    padding: 15px;
    width:100%;
    height: 150px;
    display: inline-block;
    }

    .shortpoint-listitem-wrap {
    margin-bottom: 0px !important;
    }

    Where you can change the number of columns you want using column-count property.

  • If you want the title to be to the right of the file icon and centered vertically, you'll need to change to the following:

    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
    display: table-cell;
    width: 100%;
    overflow-x: hidden;
    vertical-align: middle;
    text-align: left;
    }




I hope this article was helpful.




Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 53 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more