Flare 10 bug: Can't handle spans around drop-down hotspots

[TheGreatAndPowerfulOz]

So, I was really excited to download and install Flare v10, with all its fancy new features. As soon as I published my HTML5 target, however, I was met with great disappointment... Nothing to do with all the great new features, mind you (they're great!), but because of a glaring bug that's been introduced.

The issue is that if drop-down hotspot text is wrapped in a <span> element, nothing in the drop-down heading except the hotspot text will display in HTML5 output. I've submitted a bug to MadCap (report #87061), which they've confirmed. I thought I'd post the issue here as a warning to others who also might be affected. This issue is preventing me from actually using v10, and I'm hoping MadCap will provide a patch to fix it. If anyone else would like to "join the party" in promoting a fix, I'd surely appreciate it!

Here's why this particular issue affects my project so much that I can't upgrade to v10:

I use drop-downs very extensively in my project to help keep the content in each topic "minimal" (when users initially open a topic), while also allowing users to "drill down" to greater depths of detail.

As many of you know, drop-down headings have a little "arrow" icon to their left by default that serves to alert users that "more stuff" can be seen by clicking the drop-down hotspot link. Personally, I find the "arrow" icon a little unsightly/clunky, so most often I apply a custom class to my drop-downs to hide the icon. Instead, I prefer to place the drop-down hotspot text within parentheses, then wrap the whole thing in a <span> element whose class causes the contents of the <span> to be hidden when the topic is printed from the web browser. If you're not following, here's what the code looks like:

HTML in topic:

Code: Select all

<MadCap:dropDown class="NoImage">
	<MadCap:dropDownHead>
		<p>My heading text<span class="noPrint"> (<MadCap:dropDownHotspot>click for more information</MadCap:dropDownHotspot>)</span></p>
	</MadCap:dropDownHead>
	<MadCap:dropDownBody>
		<p>All of the great detailed information that you didn't need to see when you first opened this topic.</p>
	</MadCap:dropDownBody>
</MadCap:dropDown>

CSS

Code: Select all

@media print {
	.noPrint {
		display: none;
	}
}

dropDown.NoImage {
	mc-open-image: none;
	mc-closed-image: none;
}

I do this so users won't see the irrelevant " (click for more information)" text in their printed topic. As it stands in v10, however, this is the only drop-down heading text users now see in the online view of the topic!

The use of this screen-only <span> content is, of course, just a "nicety" I've added but I'm not about to remove it from every topic of my project at this point! It worked in v9 and lower, so I expect it to work in v10+. MadCap has offered no workaround to the issue so, again, I'm hopeful that they'll produce a patch soon.

[NorthEast]

The first thing that stands out is that you don't have a <MadCap:dropDownHotspot> tag in the dropDownHead - you have a paragraph tag.

I think dropdowns might not have included the dropDownHotspot tag in much older versions of Flare, but I'm fairly sure having a paragraph tag is invalid (you couldn't create one in the editor).

[TheGreatAndPowerfulOz]

you don't have a <MadCap:dropDownHotspot> tag in the dropDownHead

Thanks, Dave.

That was actually just an oversight in pasting the code into this post. In reality, I have a snippet within the parentheses that contains the <MadCap:dropDownHotspot> tag. I just forgot to put it in here.

I'll update the code snippet in this post to reflect the tag. As I mentioned, MadCap Support has already verified that my bug submission is valid (they can reproduce the issue).

[MarkMetcalfe]

Austin,

We use drop-downs extensively, too. However, we accomplish hiding the drop-down text from print outputs by using a condition tag. I don't think you need a span tag to do what you want, just set up a few conditions.

Code: Select all

<MadCap:dropDown>
<MadCap:dropDownHead MadCap:conditions="Conditions.All_online">
  <MadCap:dropDownHotspot>Separate mobile site design</MadCap:dropDownHotspot>
</MadCap:dropDownHead>
<MadCap:dropDownBody>
...

All_online covers both HTML5 and Mobile format; it shows up for those 2 formats, and is excluded from print outputs.
After I set the drop-down, I immediately set the condition on the text line (as shown in the code above), all from the user interface.

Also, I have replaced the drop-down arrows (which were confusing to some of our readers) with plus and minus icons that almost anyone using a computer is familiar with.

forum_image.png

You can compare the formats here - single source, using conditional text:

• HTML5: http://documentation.ektron.com/cms400/ ... ceWeb.html
• PDF: http://documentation.ektron.com/cms400/ ... erence.pdf
• Mobile: http://documentation.ektron.com/cms400/ ... obile.html

P.S. We haven't upgraded to Flare 10 yet because we are waiting until after a release to make the change.

[TheGreatAndPowerfulOz]

we accomplish hiding the drop-down text from print outputs by using a condition tag

Thanks for the reply, Mark.

I thought of conditional tags, but they won't work when a user chooses to print a Help topic from their web browser (that's the scenario I'm coding for). So, the <span.class> technique needs to be used instead.

I agree that conditional tags are certainly the best "out of the box" way to go for hiding certain content when generating print outputs from Flare, but I also need to hide the content when a user prints a topic from the HTML5 output I've generated. Happily, the <span.class> technique I've implemented for HTML5 output also works when I generate output through my PDF target, as long as the corresponding CSS is included in the target definition.

[TheGreatAndPowerfulOz]

A fix for this issue was provided in the 10.1.0 release. Thanks, MadCap!