Nested Lists and paragraphs

This forum is for all Flare issues related to styles, stylesheets and XML.

Nested Lists and paragraphs

Postby jenn85 on Thu Sep 03, 2020 11:01 am

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.
jenn85
Propeller Head
 
Posts: 12
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Postby SteveS on Thu Sep 03, 2020 3:11 pm

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.
SteveS
Senior Propellus Maximus
 
Posts: 2007
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).

Re: Nested Lists and paragraphs

Postby jenn85 on Fri Sep 04, 2020 5:23 am

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.
jenn85
Propeller Head
 
Posts: 12
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Postby Nita Beck on Fri Sep 04, 2020 6:44 am

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.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3363
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Nested Lists and paragraphs

Postby jenn85 on Fri Sep 04, 2020 6:50 am

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 (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.
jenn85
Propeller Head
 
Posts: 12
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Postby Nita Beck on Fri Sep 04, 2020 7:22 am

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
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3363
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Nested Lists and paragraphs

Postby jenn85 on Fri Sep 04, 2020 9:05 am

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/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.
You do not have the required permissions to view the files attached to this post.
jenn85
Propeller Head
 
Posts: 12
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Postby SteveS on Sun Sep 06, 2020 3:11 pm

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.
SteveS
Senior Propellus Maximus
 
Posts: 2007
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).

Re: Nested Lists and paragraphs

Postby ChoccieMuffin on Mon Sep 07, 2020 1:39 am

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 2019r1 and 2020.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
 
Posts: 2388
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Nested Lists and paragraphs

Postby Psider on Mon Sep 07, 2020 7:00 pm

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.
Psider
Propellus Maximus
 
Posts: 650
Joined: Wed Jul 06, 2011 1:32 am

Re: Nested Lists and paragraphs

Postby Dave Lee on Tue Sep 08, 2020 2:32 am

Try using absolute positioning; e.g. add:

Code: Select all
ol li:before
{
   position: absolute;
   left: 0;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5846
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Nested Lists and paragraphs

Postby jenn85 on Fri Sep 18, 2020 6:17 am

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: 12
Joined: Mon Mar 23, 2020 8:06 am

Re: Nested Lists and paragraphs

Postby jenn85 on Thu Oct 08, 2020 6:53 am

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;
}
jenn85
Propeller Head
 
Posts: 12
Joined: Mon Mar 23, 2020 8:06 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 9 guests

cron