Defining multiple dropdownBody styles

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Sofie Bird
Propeller Head
Posts: 18
Joined: Sat Nov 09, 2013 12:51 am

Defining multiple dropdownBody styles

Post by Sofie Bird »

So we've defined two dropdownbody styles, and we would like the body of the each dropdown style to have a different background colour (ie, the body of one is white, the body of the other is grey). I've defined the dropdown styles as needed. But I notice that the additional style only uses the default dropDownBody style: in the Chrome inspector, it's clear that the additional class isn't even applied to the dropdown body.

So far, I'm making do with a ridiculous number of CSS selectors to turn then on and off depending on the parent class (ridiculous because we're also nesting the dropdowns in different configurations, so I have to turn the background on or off accordingly). The only other option I can think of is to wrap the contents of one of the dropdowns in a div to give a background, but both of these are pretty fragile solutions.

Is there a way to get Flare to apply the class to the body as it should? Or is it a bug that the class isn't added?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Defining multiple dropdownBody styles

Post by NorthEast »

It works fine for me; e.g. if I create this class, and apply it to a MadCap:dropDownBody tag in the editor, I can see the background colour in both the editor and in the built output (HTML5).

Code: Select all

MadCap|dropDownBody.test
{
	background-color: #9cda51;
}
Sofie Bird
Propeller Head
Posts: 18
Joined: Sat Nov 09, 2013 12:51 am

Re: Defining multiple dropdownBody styles

Post by Sofie Bird »

This is the CSS I have:
MadCapDropDownCSS.png
It obeys the CSS for the hotspot stuff, and adds the class correctly to the outer wrapper div of the dropdown.
But both dropDown styles use the regular dropDown body: I get that background and border on both.

Here is the result in the Chrome inspector: only the regular dropDownBody class is applied to the dropdown body div:
MadCapDropDownStyleNotApplied.png
I'm using 2017, though, not R2. (we need to fix some custom scripts to work with the new TOC generation before we can upgrade).
You do not have the required permissions to view the files attached to this post.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Defining multiple dropdownBody styles

Post by NorthEast »

Apologies for the simple question - but are you applying the headingFirst class to the MadCap:dropDownBody in the editor?

For me, I apply a MadCap|dropDownBody.test class in the source, which looks like this in text view:

Code: Select all

<MadCap:dropDownBody class="test">
Which is included as a dropDownBodytest class in the output.

Code: Select all

<div class="MCDropDownBody dropDownBody dropDownBodytest" style="display: block;">
Sofie Bird
Propeller Head
Posts: 18
Joined: Sat Nov 09, 2013 12:51 am

Re: Defining multiple dropdownBody styles

Post by Sofie Bird »

Good question: I was not adding the class in the source manually. The XML editor doesn't allow the body to be selected to apply a class, which implied (to me) that the software thinks it's not necessary to do so and will cascade naturally when you set the "entire" dropdown to the class. Nor does the help instruct you to go into the source and add the class to achieve the result.

I think I'll still report [not being able to select the body in the XML editor to add a class as a bug]. At the very least, the step should be in their help; it's not intuitive.

Thank you for your help!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Defining multiple dropdownBody styles

Post by NorthEast »

Sofie Bird wrote:Good question: I was not adding the class in the source manually. The XML editor doesn't allow the body to be selected to apply a class, which implied (to me) that the software thinks it's not necessary to do so and will cascade naturally when you set the "entire" dropdown to the class. Nor does the help instruct you to go into the source and add the class to achieve the result.

I think I'll still report [not being able to select the body in the XML editor to add a class as a bug]. At the very least, the step should be in their help; it's not intuitive.

Thank you for your help!
No, CSS will never cascade/inherit a class from a parent to child tag.

You don't have to apply the class manually in the text editor, you can apply it from the styles list. Just make sure the MadCap:dropDownBody tag is highlighted first, which I can only do via the arrow keys (and is apparently not selectable using the mouse).
Sofie Bird
Propeller Head
Posts: 18
Joined: Sat Nov 09, 2013 12:51 am

Re: Defining multiple dropdownBody styles

Post by Sofie Bird »

TIL you can select the tags with arrow keys--thanks! That will make things much easier.

They accepted my feature request about making it either mouse-selectable or updating their help section on custom dropdown styles to reflect that both sections have to be manually styled, so we'll see what they do. Thanks for your help.
Post Reply