Togglers in lists

[phanna]

Hi there,

I have a werid problem. Whenever I put a toggler in a list, the bullet, toggle image, and toggler text each appear on a seperate line instead of on one line like I want. If I put the toggler in a <p> tag everything looks correct. It's only when I put it in an <ol> or <li> tag that things go strange.
I've included an example below along with the markup.
Does anyone have any ideas a to why this is happening?

Example:

toggler_eg.png

Markup:

toggler_markup.png

[LTinker68]

Your markup code pretty much explains it. The div isn't inside the <li>...</li> tag, so it's not part of the list. If you want a toggler in a list, then you'll have to convert that line item to being a line item containing a paragraph (<li><p>...</p></li>). If you mean you want to toggle a line item, then you need to apply the name attribute to the line item itself (the <li> tag), not to the content in the line item.

[phanna]

Thanks Lisa. I do want a toggler within a bullet.
1. Step one.
2. Step two.
3. Step three.
Optional substeps (toggler hotspot)
a. Step a.
b. Step b.
4. Step 4.
5. Step 5.

I can't get your solution of adding a <p> to the <li> to work. Could you show me using the markup example I attached in my original post?
Much appreciated!
Cheers,
Paula

[phanna]

Okay that example looks really bad.
Here's how I want it to look (roughly) The optional substeps in Step 4 can be toggled open or closed.:

ex..png

[LTinker68]

Ok, here's the process as I'd do it:

1. Start a list and create steps 1, 2, 3, 4 (just the intro text, not the sub-list item), and 5, even if 5 is just placeholder text for now. (Creating that line item now makes it easier to get back to the list when you're ready to continue.)
2. Put the cursor back on step 4 then click the drop-down arrow next to the List Actions icon and select "Make Paragraph Item(s)". If you have the show blocks option enabled then you'll a p block is now inside the li block for that line.
3. Go to the end of that line and press Enter to insert a new paragraph inside that line item.
4. Type "Optional substeps" (I'm assuming that's going to be your toggler hotspot text). Press Enter again to insert another paragraph block.
5. Click the drop-down arrow next to the list types icon and select Lower-alpha Number List. It will add a new line item (5) lined up with the main list. Click the indent icon to indent the list, then select the Lower-alpha Number List option again. It's a bug that you have to basically do that step twice, but when you're done, you'll see a new <ol> block inserted inside the <li> block beneath the previous <p> block (see the code snippet below).
6. Insert your substeps.
7. Right-click on the <ol> block containing those substeps, then select Format > Name and give that sublist a name (e.g. "toggleSubsteps").
8. Select the text that will act as the toggler hotspot, then click Insert > Toggler, select the named element above, then click Ok.
9. The next line item (#5 in this case) was already started, so you can go back to it, finish it, and continue with the list.

The page code will look similar to the following. Note how the closing </li> tag for line item 4 comes after the paragraph tags and sublist's ol tags. You can select that li tag in the show blocks area and move that line item and everything inside it all at once, so if you want to make the thing step 3, then you just move it up -- everything will stay together.

Code: Select all

        <ol>
            <li>Step one</li>
            <li>Step two</li>
            <li>Step three</li>
            <li>
                <p>Step four</p>
                <p>
                    <MadCap:toggler targets="toggleSubsteps">Optional substeps</MadCap:toggler>
                </p>
                <ol style="list-style-type: lower-alpha;" MadCap:targetName="toggleSubsteps">
                    <li>Step a</li>
                    <li>Step b</li>
                </ol>
            </li>
            <li>Step five</li>
        </ol>

[phanna]

Thanks for the detailed instructions! I followed the steps but unfortunately I still get the same result.
My markup now looks this:

Code: Select all

<ol>
            <li>Step 1.</li>
            <li>Step 2.</li>
            <li>
                <p>Step 3.</p>
                <p>Woo woo woo</p>
                <p>
                    <MadCap:toggler targets="substeps">Optional Substeps</MadCap:toggler>
                </p>
                <ol style="list-style-type: lower-alpha;" MadCap:targetName="substeps">
                    <li>step a</li>
                    <li>step b</li>
                    <li>step c</li>
                </ol>
            </li>
            <li>Step 4.</li>
        </ol>

But my output still looks like this in IE 7,8, Chrome, Firefox, and Safari. I get the same result if I copy and paste your code into my Flare editor.
Can you think of anything else it could be?

[LTinker68]

No, your page code looks fine. Did you modify the toggler styles at all in the stylesheet? Or rather, did you create a complex selector with lists and toggler items? Since it's fine outside of a list but not fine inside a list then it would seem there's a complex selector having some effect. If you want to test that, create a test project and do nothing to the project or stylesheet. Cut-and-paste the page code from above into a topic and build the project. If it appears fine in the test project then you know there's something in your stylesheet that's causing the problem.

[phanna]

Thanks! When I test my code with the default stylesheet it works so it's got to be something in my stylesheet. Stupid question: What is a "complex selector"?
Here are my list and toggler style. I can't see anything "funny" in them but I'm obviously missing something.
li

Code: Select all

li
{display: list-item;}

ol

Code: Select all

ol
{
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 14px;}

ul

Code: Select all

ul
{
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 14px;
	font-style: normal;
	color: #000000;
	list-style-image: url('../Images/bullet_2_black.gif');
}

toggler

Code: Select all

MadCap|toggler
{
	text-decoration: none;
	mc-closed-image: url('../Images/toggle_closed.gif');
	mc-open-image: url('../Images/toggle_open.gif');
	font-weight: normal;
	color: #ff8000;
	vertical-align: middle;
	margin-bottom: 0px;
}

[LTinker68]

Stupid question: What is a "complex selector"?

Your normal styles are single tag declarations, like p { color:#000000; } would result in your paragraphs all having text with a black color. But say you wanted paragraphs inside tables to have a red color. Now you could create a custom paragraph class (e.g., p.redTxt { color:#FF0000; }) and then manually apply that paragraph class to every paragraph you inserted inside a table. That would fairly tedious to do if you had a 5-olumn, 20-row table. A complex selector is a way to do the same thing, but automatically. A complex selector is a way of saying (in this example) "all paragraphs are black, except in tables paragraphs are red". In the code block below, the first style is a normal style declaration, the second style is the complex selector. The parent tag (<td>) is listed first, then a space, then the child tag (<p>). So a paragraph inside a table cell (<td>) behaves as declared in this complex selector. There are several different types of complex selectors, but Flare doesn't play well with all of them. This basic type it does work with, except you have to manually add the complex selectors to the stylesheet file (you can't do it via the Stylesheet Editor).

Code: Select all

p {
   color:#000000;
}

td p {
   color:#FF0000;
}

I can't see anything "funny" in them but I'm obviously missing something.
ul

Code: Select all

ul
{
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 14px;
	font-style: normal;
	color: #000000;
	list-style-image: url('../Images/bullet_2_black.gif');
}

Try removing the list-style-image attribute from the ul style declaration.

[phanna]

Thank you so much Lisa - You helped me figure it out!
I have a complex selector for images that says li img {display: block;}. This was causing the issue so now I can fix it.

Thanks again!
Paula