Popover Design Element is one of the ShortPoint inline Design Elements. Once you have it connected to a SharePoint list that contains few items, they will appear in a line, sometimes making it unclear where the first item ends and the next begins. 

If you would like to display them in a list view to have a clear display of the items, this article is for you. Here is how it may look like:

Before	After

In this article, we will show you simple steps on how to achieve this customization using custom CSS. Please follow the steps below if you would like to apply this solution.

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the settings of the Popover Design Element
• Step 2. Copy the custom CSS code
• Step 3. Update the Popover Design Element with the code
• Result

Before we begin

• ShortPoint CSS customizations are available starting from ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.
• You have ShortPoint installed on your SharePoint site.
• Make sure you are a ShortPoint user with an active license.
• You have a Popover Design Element connected to a SharePoint list.

Step 1. Open the settings of the Popover Design Element

Edit the page.

Click the cog wheel icon to open the settings of the Popover Design Element:

The Settings tab will open.

Step 2. Copy the custom CSS code

Here is the custom CSS code you will need to use to change the view of the Popover Design Element into a list.

display: list-item;
max-width: fit-content;
list-style-type: none;

Note: You may update the display or list style type according to your preference. To know more about adding custom CSS to your page, please check out these articles we have created for you: How to insert Custom CSS into a Page Builder (Basic Tutorial) and Add Custom CSS to a ShortPoint Design Element (Advanced Tutorial).

Step 3. Update the Popover Design Element with the code

Switch to the Custom CSS tab:

Paste the copied code from the Step 2 to the Custom CSS field:

You may check how it will look like on your page by clicking the Preview button:  

Then, click Update and save the page: 

Result

That's it. This is how it may look like on your page:

Related articles:

• How to Customize the ShortPoint Tooltip Design Element with Custom CSS
• Connected to a SharePoint list: Show New Items at Top