How can we help you today?

How to Display Popover Design Element in a List View

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

  • 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).


Please copy the code to the clipboard.


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:

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 52 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