drop down CSS classes

[Josh101]

Hi Everyone,

I'm trying to apply a class to a drop-down text box, but I'm having some issues. What I'm trying to do is create a special class for some drop-down text boxes because I want some drop-down text areas to look different. So I created a class for the dropDown like this, which seems to work find:

MadCap|dropDown.myClass

Then I also want to make body of the drop-down have a different color of text, so I created the following style:

.myClass MadCap|dropDownBody

Now this is legal CSS, meaning it will only change dropDownBody elements within a .myClass class. But this doesn't work in my WebHelp output becuase it seems that Flare changes the class name in the output to this:

<div class="MCDropDown_myClass_0">

And also changes the dropDownBody to:

<div class="MCDropDownBody>

Now, I can add CSS for the class called MCDropDownBody and everything seems to work fine:

.MCDropDown_myClass_0 div.MCDropDownBody

So, my question is this: Is Flare consistent in naming these classes? Can I be sure that <MadCap:dropDownBody> is always going to a div with a class called "MCDropDownBody"? And can I be sure that <MadCap:dropDown class="myClass"> is always going to be a div with a class called "MCDropDown_myClass_0"?


Thanks,
Josh

[NorthEast]

None of the MadCap| styles exist in the output, as they're all converted to real HTML tags/classes. I think it's just to make things simpler, so you can edit a single MadCap| style which represents multiple tags/classes in the output, which may also be different between outputs (e.g. WebHelp and HTML5).

Anyway, as you've found out, CSS complex selectors don't work with MadCap| styles, so you have to use the real tag/class names used in the output.

The problem with this is that these output tag/class names may change between Flare versions, and may also be specific to a particular output (e.g. dropdown style tag/class names are different between WebHelp and HTML5).

The output tag/class names do appear to be fairly consistent in particular Flare versions and outputs though; but you can't rely on it not changing between Flare versions, e.g. the new '_0' convention was introduced in Flare v7 (see http://forums.madcapsoftware.com/viewto ... =6&t=12550).

[Josh101]

Thanks for the info, something I'll have to keep in mind if we ever upgrade Flare. It would be nice if MadCap would keep in mind that users are going to create custom classes for these MadCap: tags, and that they should make an effort not to break those styles when building the output. I can think of multiple ways it could be done. I don't generate HTML5 output, but it's also frustrating to know that I may need to create additional styles because the code is generated differently for WebHelp. Some consistency would be helpful from MadCap.

I keep running into these issues with Flare, and once again I wonder if my company chose the correct tool.

[NorthEast]

If that's a concern, then just use MadCap| styles and don't reference any of the output styles. I will mean slightly less elegant CSS (i.e. not using complex selectors), but would mean nothing should break.

I can kind of understand why MadCap| styles don't work with the full range of CSS selectors, as a single MadCap| style may actually represent multiple different tags and classes in the output. Getting them to 'obey' CSS selectors may not be quite as straightforward as it first appears.

[i-tietz]

Now this is legal CSS, meaning it will only change dropDownBody elements within a .myClass class. But this doesn't work in my WebHelp output becuase it seems that Flare changes the class name in the output to this:

<div class="MCDropDown_myClass_0">

And also changes the dropDownBody to:

<div class="MCDropDownBody>

Now, I can add CSS for the class called MCDropDownBody and everything seems to work fine:

.MCDropDown_myClass_0 div.MCDropDownBody

So, my question is this: Is Flare consistent in naming these classes? Can I be sure that <MadCap:dropDownBody> is always going to a div with a class called "MCDropDownBody"? And can I be sure that <MadCap:dropDown class="myClass"> is always going to be a div with a class called "MCDropDown_myClass_0"?

NO. Flare is not consistent.
It can get even worse if you're working with nested dropdowns. Then you get more than the "_0" added, but also "_1", "_2", etc.
And in each topic the numbers are attached to different classes!
Why? I think it has to do with the different nesting in each topic. I think a dropdown with "ClassA" can have different classes in the output (e.g. "ClassA_1" and "ClassA_0") - depending on the nesting level they have.
I've seen it that I added a dropdown to a topic and all the dropdowns in the topic changed theier looks and their classes in output. And when I added the same dropdown on another nesting level, but in the same topic, simply nothing changed ... I never found out what logic is behind it ... if there's any ...

[Josh101]

Thanks for the additional input.

Dave, I'm already using the MadCap| styles for my default dropDowns. My issue is that I have some that I want to do something special with and I don't want to mess up the default dropDowns by changing their styles. Seemed like an easy solution to just attach a class to the element until I saw what Flare did to the output.

It's legal to attach more than one class to an html element. I wish the Flare developers would just do that when the output is generated: use whatever class they need to make the dropDowns work, then also add any class the user has added. That way we wouldn't have to try and guess what name they are going to give to the dropDown in the output. Seems like a simple fix to me, but what do I know?

i-tiez, I haven't even considered nesting dropDowns. I don't think I even want to go down that rat hole. You're braver than I am I guess.

My big issue with this whole thing is that I wish Flare was a bit more user friendly in letting us customize out output for those MadCap-specific elements such as dropDowns, etc. Seems like they could get what they need out of the output so that it's legal html, while still allowing us to style it however we want without having to make guesses about how Flare is changing the names of our styles. It's doing exactly what they designed it to do, but for users like me it seems like a bug because it makes my life difficult.

[Psider]

What about creating a class for the MadCap|DropDownBody? If you show the tag bar on the left, you can right-click on the tag and apply different classes to the body content as required. Admittedly you have to apply 2 different classes, rather than having it happen automatically, but this might be a workable solution.
Amber

[i-tietz]

Have you tried the following?

Code: Select all

MadCap|dropDown.myClass MadCap|dropDownBody

or this?

Code: Select all

MadCap|dropDown.myClass > MadCap|dropDownBody

Maybe the Flare programmers are smart enough to hand the class of the dropdown down to the div ...