Try ShortPoint nowThis 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:
