Dropdown style configurations not appearing in HTML5 output

[Wendy_Pod]

Help! I’m currently battling with styling a set of dropdown styles for my project in Flare 2017 r3.

I have two main targets, PDF and HTML5. The dropdown heading styles are not rendering as expected in the HTML5 output. The goal for these two dropdown styles is to have their heading text match a set of paragraph styles we already use (Subhead1 and Subhead2).

PDF output works after applying style settings to the MadCap|dropDown.Subhead1 MadCap|dropDownHotspot and MadCap|dropDown.Subhead2 MadCap|dropDownHotspot selectors.

PDF Output.png

Unfortunately, and infuriatingly, the HTML5 output is not cooperating. The settings I apply to the MadCap|dropDownHotspot child selector below each subhead style do not appear in the HTML5 output.

HTML5 Output.png

On a lark, after way too much trial and failure (and failure and failure) I tried testing it with HTML Help output and it wondrously behaves as expected. This confirms the styles are formatted correctly and that this isn’t a weird @media/medium thing.

HTML Help Output.png

What gives!?

I’ve tried setting CSS configuration a few selectors deep, but no joy.

The HTML5 output seems to be converting the dropDownHead to a link so I’ve even tried going with MadCap|dropDown.Subhead1 MadCap|dropDownHotspot a but this doesn’t result in any change.

HTML5OutputSourceCode.png

This link conversion appears to have started with version 10, http://kb.madcapsoftware.com/Content/Mi ... colors.htm. Based on this, I’ve also tried styling MadCap|dropDown.Subhead1 MadCap|dropDownHotspot:link, but again not change in the HTML5 output.

There are a few threads here with others having challenges formatting dropdowns,
viewtopic.php?f=9&t=19124
viewtopic.php?f=6&t=18484

however, these aren’t quite the same issue, getting output to look correct in HTML5!

The Flare HTML 5 guide, http://docs.madcapsoftware.com/FlareV11 ... 5Guide.pdf, suggested that there may be some styles carried in the C:\Program Files\MadCap Software\MadCap Flare V13\Flare.app\Resources\WebHelp2\Desktop\Skins\Fluid\Stylesheets folder, but those stylesheets don’t seem to have any formatting related to dropdowns.

Please, I throw myself on the mercy of the forum. Has anyone figured out how to make MadCap|dropDownHotspot child selector styles work in HTML5 output?

CSS.png

[TWAnnie]

Hi Wendy_Pod,

I have something similar - targets to PDF and HTML5, and some selectors working perfectly in PDF but not in HTML5.
The solution (that worked for me) is to make the selectors in the HTML5 formatting more specific.
For example, instead of just:
div p
I had to use selectors like:
div + p
or
div > p

If such selectors are usable in your project, give it a try.

[Wendy_Pod]

Thanks Annie - I'll give that a whirl.

I've been working with Madcap support and they haven't resolved this issue, but their attempts have bumped me in a few promising directions. I'll post any progress/resolutions I find.

[NorthEast]

Please, I throw myself on the mercy of the forum. Has anyone figured out how to make MadCap|dropDownHotspot child selector styles work in HTML5 output?

AFAIK, you can't use complex selectors for any MadCap| styles; e.g. you can't have expressions like MadCap|x MadCap|y or MadCap|x > MadCap|y.
They might appear to work in the editor, but not the output.

That's presumably because a MadCap| style quite often doesn't represent a single element; i.e. a single MadCap| style can apply to multiple different tags in the output.

When I need to do this in my stylesheets, I have to set up complex selectors based on the styles generated in the output.

[Wendy_Pod]

Thanks David Lee - am still banging my head on this one and seem to have stumped MadCap support as well.

Rather than keep trying the same things that work so well for PDF output, I will next try creating a style for the class that gets created in the generated HTML5 output.