Nested Lists and paragraphs

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
jenn85
Propeller Head
Posts: 14
Joined: Mon Mar 23, 2020 8:06 am

Nested Lists and paragraphs

Post by 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!
You do not have the required permissions to view the files attached to this post.
SteveS
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: Nested Lists and paragraphs

Post by SteveS »

Have you tried putting the content inside the list item tag, rather than after?
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
jenn85
Propeller Head
Posts: 14
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Post by jenn85 »

SteveS wrote: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
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Nested Lists and paragraphs

Post by 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 (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.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
jenn85
Propeller Head
Posts: 14
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Post by jenn85 »

Nita Beck wrote: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 (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
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Nested Lists and paragraphs

Post by 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/doc ... /Selectors
https://www.w3schools.com/cssref/css_selectors.asp
https://help.madcapsoftware.com/flare20 ... dSelectors
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
jenn85
Propeller Head
Posts: 14
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Post by jenn85 »

Nita Beck wrote: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/doc ... /Selectors
https://www.w3schools.com/cssref/css_selectors.asp
https://help.madcapsoftware.com/flare20 ... dSelectors

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 do not have the required permissions to view the files attached to this post.
SteveS
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: Nested Lists and paragraphs

Post by 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.
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Nested Lists and paragraphs

Post by ChoccieMuffin »

jenn85 wrote: 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.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Nested Lists and paragraphs

Post by 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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Nested Lists and paragraphs

Post by NorthEast »

Try using absolute positioning; e.g. add:

Code: Select all

ol li:before
{
   position: absolute;
   left: 0;
}
jenn85
Propeller Head
Posts: 14
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Post by jenn85 »

SteveS wrote: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
Propeller Head
Posts: 14
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Post by 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;
}
Post Reply