How to Display 2, 3 or 4 Connected Panels on the same Row

So you want to preset a data stored in your library using the nice Panel ShortPoint element, but you do not want the panels to be stacked on top of each other, and wish that if there is a way to have these panels arragned next to each on the same row ( like in the image below ), well this article is just the right for you.

Before we start:

We assume that you already have a SharePoint library/list that contains the data you wish to render using the ShortPoint Panel element, In this article we are going to use a Products Library ( Picture Library ), that contains an extra columns for Color & Description ( see image below )

Step 1: 

Open the Generator Page ( Go to Site Settings > ShortPoint Dashboard >  ShortPoint Generator )

Step 2: 

Give the Generator ShortPoint a name ( e.g: product panels ), then

Click on the Blue plus button to open up the ShortPoint Page Builder > Choose Panel

Step 3:

Connect to your list/library

Step 4:

Fill in the Settings tab, what we did for this example in order:

1. Style: solid-header.
2. Color: we have chosen the Color column from our library.
3. Panel Title: we have chosen the #BaseName (which appears in the column mapping drop-down as a Name), you may have another column to display here, so its up to you.
4. Height: We set the height to be 33% of the screen (at the end we want them all to have the exact height, to be perfectly aligned next to each other).

Step 5:

Filling the Content tab.

What we need to render in the Content tab is:

• the image;
• the description, and 
• a link to the list item we're reading information from.

In the editor, please switch to the Code View:

Paste the following code ( Note: Column names highlighted in red might have different name at your environment ):

<img src="#FileRef"/><br/><br/>
#Description <br/><br/>
<a href="#_SHORTPOINT_DisplayItemURL" style="color: #Color">Read more</a>

Here are some explanation about the code above:

1. First line, we add an Image that has #FileRef column name as the source of the image, which will be replaced with the actual Picture URL at runtime, with 2 breaklines afterwards ( <br/><br/> )

2. Second line: We will render the #Description column ( you might have a different Column name at your environment ) followed by 2 breaklines as well

3. Third line we will render a Read more link, that has the same color as the panel item ( style="color: #Color" ), and a link to the item itself from the library.

Step 6: 

Switch off the Code view

Step 7: 

Add The Custom CSS

Switch to the Custom Tab, and add any of the following CSS codes ( based on how many panels you wish to display on the same row )

2 panels on the same row

/* 2 panels on the same row */
&.shortpoint-panel {
  width: calc((100% / 2) - 30px);
  display: inline-flex;
  margin-right: 15px;
  margin-top: 5px;
  vertical-align: top;
  text-align: center;
}

&.shortpoint-panel:nth-of-type(2n) {
  margin-right: 0;
  float: right;
} 

3 panels on the same row

/* 3 panels on the same row */
&.shortpoint-panel {
  width: calc((100% / 3) - 32px);
  display: inline-flex;
  margin-right: 15px;
  margin-top: 5px;
  vertical-align: top;
  text-align: center;
}

&.shortpoint-panel:nth-of-type(3n) {
  margin-right: 0;
  float: right;
}

4 panels on the same row

/* 4 panels on the same row */
&.shortpoint-panel {
  width: calc((100% / 4) - 34px);
  display: inline-flex;
  margin-right: 15px;
  margin-top: 5px;
  vertical-align: top;
  text-align: center;
}

&.shortpoint-panel:nth-of-type(4n) {
  margin-right: 0;
  float: right;
}

Step 8:

Save the Generated ShortPoint

Step 9:

Add the Generated ShortPoint into your page,

If you remember, we called it Product panels, and you should find it in the Page Builder in a golden color at the bottom.

Click Insert, and Save the page.

Final Result:

FAQs

Q1: Why we had to create the panels connections from the ShortPoint Generator page? Why don't we just do that inside the site page itself? Shouldn't that work?

A1: Well, it will not work 100%, the image links will be broken, because when we add the images the html will look like this ( <img src="#FileRef" /> ), and once you save the page, the SharePoint platform will think that the image src attribute is not valid, and it will prefix it with the absolute path of the site to become something like this ( <img src="/path/to/your/SitePage.aspx#FileRef" /> ), which will break the image.

Q2: Can I apply the same solution to ShortPoint List elements?

A2: Sure, please check the related article here: How to make Simple-list, Image-list and File-list items display horizontally (side-by-side)