Nested Lists and paragraphs

[jenn85]

I've modified list settings to create background for the numbers using css and it works beautifully--except when I need to make the list item into a paragraph item because I have either a div, bullets, or image below it. In this case, the spacing is off (see attachment).

Does anyone know what paragraph setting needs to be modified, or a workaround for this?

Thank you!

[SteveS]

Have you tried putting the content inside the list item tag, rather than after?

[jenn85]

Have you tried putting the content inside the list item tag, rather than after?

I don't think that will work if I'm trying to have divs or multiple paragraphs.

[Nita Beck]

You can absolutely have multiple paragraphs, divs, and even tables nested inside list items. Doing so is a best practice.

To quote myself from another recent discussion (https://forums.madcapsoftware.com/viewtopic.php?f=10&t=32535):

Agree with the suggestion that you nest paragraphs and other elements within list items so that the content is contained in a single list. This is especially important for accessibility, if you’re producing HTML5 output. A screen reader needs to identify the structure of the list.

Learn how to nest elements within a list item here: https://help.madcapsoftware.com/flare20 ... -Items.htm.

[jenn85]

You can absolutely have multiple paragraphs, divs, and even tables nested inside list items. Doing so is a best practice.

To quote myself from another recent discussion (https://forums.madcapsoftware.com/viewtopic.php?f=10&t=32535):

Agree with the suggestion that you nest paragraphs and other elements within list items so that the content is contained in a single list. This is especially important for accessibility, if you’re producing HTML5 output. A screen reader needs to identify the structure of the list.

Learn how to nest elements within a list item here: https://help.madcapsoftware.com/flare20 ... -Items.htm.

Oh I was misunderstanding! I thought you meant getting rid of the p tags and just doing shift enter.

I DO have paragraph tags within the li tag. That is my problem. When I make a list item into a paragraph, that's when the alignment as you see above occurs.

[Nita Beck]

I suspect, then, that the issue is in your stylesheet. For the base p selector, do you have a margin-left set? If yes, you will need to override that when paragraphs are nested within <li>s. You'll need a complex selector something like this, which says "When a p is nested inside an li, give it this margin-left:

Code: Select all

li p
  {
    margin-left: 0px;
  }


You can learn more about complex selectors (aka advanced selectors) here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
https://www.w3schools.com/cssref/css_selectors.asp
https://help.madcapsoftware.com/flare2020/Content/Flare/Styles/Basics-CSS/Important-Style-Terms-Concepts.htm#AdvancedSelectors

[jenn85]

I suspect, then, that the issue is in your stylesheet. For the base p selector, do you have a margin-left set? If yes, you will need to override that when paragraphs are nested within <li>s. You'll need a complex selector something like this, which says "When a p is nested inside an li, give it this margin-left:

Code: Select all





You can learn more about complex selectors (aka advanced selectors) here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
https://www.w3schools.com/cssref/css_selectors.asp
https://help.madcapsoftware.com/flare2020/Content/Flare/Styles/Basics-CSS/Important-Style-Terms-Concepts.htm#AdvancedSelectors

This solves the problem of indentation, but unfortunately the first line is still not aligned:

example 2.png

Here's the coding I have for the numbering, as well as for the li p:

Code: Select all

ol
{
   counter-reset: item;
   margin: 0;
   padding: 0;
   list-style-position: outside;
   list-style-type: decimal;
}

li p

{
   margin-left: 25px;
   
}

ol li
{
   counter-increment: item;
   margin: 12px 0 0 0;
}

ol li:before
{
   margin-right: 12px;
   content: counter(item);
   background: #FF6600;
   border-radius: 100%;
   color: white;
   width: 1.6em;
   text-align: center;
   display: inline-block;
}

Am I missing something obvious that I may need to add in? Note how #2, which doesn't have a nested paragraph, does align so at least I know I did that part right!

Thank you for those links! I'm going to dive in and hopefully learn more so I can troubleshoot better.

[SteveS]

There are limitations on formatting ordered and unordered lists (ul and ol).

One workaround is to use autonumber. You can use it to create a numbered element, formatted how you like. You can format whatever follows however you like, and then apply you autonumber to the next numbered element.

Autonumbers also let you break your content into different topics and still have the numbering follow.

[ChoccieMuffin]

This solves the problem of indentation, but unfortunately the first line is still not aligned:

example 2.png

Here's the coding I have for the numbering, as well as for the li p:

Code: Select all

ol
{
   counter-reset: item;
   margin: 0;
   padding: 0;
   list-style-position: outside;
   list-style-type: decimal;
}

li p

{
   margin-left: 25px;
   
}

ol li
{
   counter-increment: item;
   margin: 12px 0 0 0;
}

ol li:before
{
   margin-right: 12px;
   content: counter(item);
   background: #FF6600;
   border-radius: 100%;
   color: white;
   width: 1.6em;
   text-align: center;
   display: inline-block;
}

Am I missing something obvious that I may need to add in? Note how #2, which doesn't have a nested paragraph, does align so at least I know I did that part right!

Thank you for those links! I'm going to dive in and hopefully learn more so I can troubleshoot better.

You might want to adjust the left margin for your "li p" complex selector. Have a bit of a play, change that setting to something like 100 px, rebuild and adjust to fit. You're almost there, now just need a bit of tweaking.

[Psider]

If the first element inside an li will always be a p tag, you could see if this works for you:

Code: Select all

ol li p:first-child {
    display: inline;
  }

However, it will break if you have the following coding:

Code: Select all

<ol>
    <li>This is the first bullet
        <p>This is an explanatory paragraph</p>
    </li>
</ol>

The <p> in this example will be set to inline and display on the same line as "This is the first bullet" because it is technically the first child of the li tag.

You'll also need to tweak your margins for the first child.

[Dave Lee]

Try using absolute positioning; e.g. add:

Code: Select all

ol li:before
{
   position: absolute;
   left: 0;
}

[jenn85]

There are limitations on formatting ordered and unordered lists (ul and ol).

One workaround is to use autonumber. You can use it to create a numbered element, formatted how you like. You can format whatever follows however you like, and then apply you autonumber to the next numbered element.

Autonumbers also let you break your content into different topics and still have the numbering follow.

Looks like this is the solution I'm going to have to attempt; I spoke with madcap help and they said that the "content:counter(item) in ol li:before is what is causing the alignment issue, but removing that breaks the numbering.

Which is also a dilemma because for auto-numbering, in order to get the number to display I think I have to use "content:counter(item) to get the background displayed, unless there is another way. I had no idea that this would be this frustrating!

[jenn85]

Found the solution! Here's the code:

Code: Select all

ol,
li
{
   list-style-position: outside;
   /* Prevent content from wrapping beneath bullets or other list item markers */
   margin: 0;
   padding: 0;
   /* Clear default padding and margin from lists and list items */
}

ol
{
   counter-reset: item;
   /* Reset the counter with each new list */
}

ol > li
{
   position: relative;
   /* Create position context for custom counter inserted via before pseudoclass */
   margin: 12px 0 0 0;
   list-style: none;
   /* Remove default numbering */
   padding-left: 36px;
   /* Shift content to the right to make space for and prevent wrapping beneath custom counter/number */
}

/* Insert and style custom numbering for ordered lists used to provide steps of a procedure */

ol > li:before
{
   content: counter(item);
   /* Increment counter with each list item */
   counter-increment: item;
   position: absolute;
   left: 0;
   /* Position counter at left edge of the item and ignore padding applied to li content  */
   width: 1.6em;
   color: #fff;
   text-align: center;
   background-color: orange;
   border-radius: 100%;
}

ol ol > li:before   /* Modify numbers (orange => gray) for lists of substeps */
{
   background-color: #d3d3d3;
   /* Replaces orange background with gray */
   color: #000;
   /* Changes the number from white to black */
}

ol ul
{
   counter-increment: none;
   list-style-type: disc;
   padding-left: 6px;
}