How can we help you today?

How to Add Sublist in List Elements

Problem

You'd like to display some items in ShortPoint's list as sub-items but can't.


Reason

By default you can only create a simple vertical list using ShortPoint's list. Displaying list items in steps is currently not supported out-of-the-box.


Solution

This solution applies to all ShortPoint list elements, including Image list, File list, Simple lists. Please follow these simple steps to display sub-lists up to three levels deep:


1. Copy the css code snippet below

.sublist--level-1 {
  margin-left: 30px;
  width: calc(100% - 30px);
}

.sublist--level-2 {
  margin-left: 60px;
  width: calc(100% - 60px);
}

.sublist--level-3 {
  margin-left: 90px;
  width: calc(100% - 90px);
}


2. Go the Custom css tab in your Simple list element and paste the copied CSS code snippet in the Custom css field


3. Go to the item in your list you want to display as a sub-item


4. Turn on Enable Custom Settings for this item only 


5. While on the same item, scroll down to the Custom CSS section and in the class field, type sublist--level-1

  • Adding sublist--level-1 to an item will move it 30 pixels to the right
  • Adding sublist--level-2 to an item will move it 60 pixels to the right
  • Adding sublist--level-3 to an item will move it 90 pixels to the right


Please repeat step 4 and 5 for all items you want to display as a sub-item


6. Click Insert/Update and save the page

7. Your list item should now be displayed as a sublist


In the example below, I have added the three classes in the following way:

  1. Sub level 1 - sublist--level-1
  2. Sub level 2 - sublist--level-2
  3. Sub level 3 - sublist--level-3





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