Nested Lists and paragraphs
Nested Lists and paragraphs
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!
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.
-
- 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
Have you tried putting the content inside the list item tag, rather than after?
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
Re: Nested Lists and paragraphs
I don't think that will work if I'm trying to have divs or multiple paragraphs.SteveS wrote:Have you tried putting the content inside the list item tag, rather than after?
-
- Senior Propellus Maximus
- Posts: 3667
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Nested Lists and paragraphs
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):
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
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Re: Nested Lists and paragraphs
Oh I was misunderstanding! I thought you meant getting rid of the p tags and just doing shift enter.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.
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.
-
- Senior Propellus Maximus
- Posts: 3667
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Nested Lists and paragraphs
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:
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
Code: Select all
li p
{
margin-left: 0px;
}
https://developer.mozilla.org/en-US/doc ... /Selectors
https://www.w3schools.com/cssref/css_selectors.asp
https://help.madcapsoftware.com/flare20 ... dSelectors
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Re: Nested Lists and paragraphs
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:You can learn more about complex selectors (aka advanced selectors) here:Code: Select all
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:
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;
}
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.
-
- 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
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.
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.
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
-
- Senior Propellus Maximus
- Posts: 2630
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Nested Lists and paragraphs
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.jenn85 wrote: This solves the problem of indentation, but unfortunately the first line is still not aligned:
Here's the coding I have for the numbering, as well as for the li p:
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!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; }
Thank you for those links! I'm going to dive in and hopefully learn more so I can troubleshoot better.
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Re: Nested Lists and paragraphs
If the first element inside an li will always be a p tag, you could see if this works for you:
However, it will break if you have the following coding:
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.
Code: Select all
ol li p:first-child {
display: inline;
}
Code: Select all
<ol>
<li>This is the first bullet
<p>This is an explanatory paragraph</p>
</li>
</ol>
You'll also need to tweak your margins for the first child.
Re: Nested Lists and paragraphs
Try using absolute positioning; e.g. add:
Code: Select all
ol li:before
{
position: absolute;
left: 0;
}
Re: Nested Lists and paragraphs
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.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.
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!
Re: Nested Lists and paragraphs
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;
}