Drop-down text in an ordered list

[redshoes37]

Hi,

Is it possible to use drop-down text within an ordered list? I can't seem to make it work.

What I'd like to do is provide my users with the option of seeing additional detail about specific steps in a list, and I'd like to use the drop-down text feature to provide that to them.

[alt_jennifer]

Yes, you definitely can use drop down text inside an ordered list. (I tested this with WebHelp output in Flare 8.)

There are two ways that I know of to do it, but for both steps, you first have to make the list item in question a Paragraph Item. To do this, right click on the <li> block on the left, and select "Make a Paragraph Item" from the mouse menu. This will add in a paragraph tag around the list item's text and will allow you to add more paragraphs inside the list item. From there, your approach depends on how you want it to look. Here are the options I came up with (for the unopened dropdowns):

DropDown1.PNG

List item #2 has the dropdown starting on the first line (the whole first line is part of the DropDown Head, but only "See more info" is part of the Hotspot). List item #3 has the dropdown starting on the second line only, and the whole line serves as the Hotspot.

Here's how the dropdowns open up:

DropDown2.PNG

And here's how it looks in Flare:

DropDownFlare.PNG

Of course, you can always play with the styling to make it look the way you want. I just focused on the mechanics in these examples. I hope this helps!

[Keri M]

Hello,

I am also trying to create dropdowns to apply to my numbered steps in HTML5 output and wondering if anyone can help. I have only been using MadCap for a few months so apologize for my ignorance!

I added the L:{ =0} autonumber format to my MadCapIdropDownHotspot style with the intent of restarting the numbering of a list of steps when I apply that style. (I have done this to a standard heading using the p class and it works like a charm.) In the case with the MadCapIdropDownHotspot, it works for PDF but does not work when I pub the same content to HTML5. Am I forgetting something?

In addition, which dropdown style controls the spacing between the dropdown header and the body when someone clicks the hotspot? I have a much larger gap when I pub to HTML5 than when I do to PDF and would like to fix this.

Thanks!

[Nita Beck]

Perhaps your stylesheets edits were only for the print medium rather than the default medium. That would explain why the drop-downs work in PDF but not in HTML5.

[Keri M]

It seems the undesired spacing is something new in version 9: http://forums.madcapsoftware.com/viewto ... own#p90241.

But what I still don't get is that there isn't any additional spacing when I add a table, using my tablestyles. What style should I be looking at in case I've set something incorrectly for the non-print medium?

I have also gone into my CSS and added the autonumbering formatting there, for every medium, to no avail.

[alt_jennifer]

I would imagine that the gap between the dropdown body and header is due to the padding-top or margin-top of the dropdown body, but it could be the padding-bottom or margin-bottom of the header, I suppose. Although my money would be on the body. And even if the undesired spacing is just a Flare 9 bug, if it's specific to dropdowns, then it wouldn't impact the tables (but I didn't read the linked post).

I myself don't really work with autonumbers, so I can't help you out much there. Maybe there's a bug with autonumbers on dropdowns in HTML5? Sorry I can't be more help. You should try contacting MadCap Support to see if they can figure it out.

Good luck!

[rob hollinger]

View the output in a browser such as Chrome - Click F12 to open Developer tools.

Depending on the browser, you can inspect elements.
Click on each of the elements and you should be able to spot the style causing the space.

Dropdown becomes a div. It contains dropdown head and drop down body.

One thing to to note - Drop down body is a container (DIV). Paragraphs, Tables, etc inside of it can have their margins or padding set to cause this separation. Make sure the main DIV in the stylesheet does not have padding or margin set either.