SecondLevel Dropdown Images

[erinep23]

Hi,

I am trying to create a SecondLevel drop down. I know there's a MadCap bug where we have to add the images like this:

.MCDropDown_Closed .MCDropDownHotSpot_
{
background-image: url('../Images/Bullets/DropDownClosed.png') !important;
}

.MCDropDown_Open .MCDropDownHotSpot_
{
background-image: url('../Images/Bullets/DropDownOpen.png') !important;
}

How do we do that with SecondLevel dropdowns?

Right now I have it like:

MadCap|dropDown.SecondLevel

.MCDropDown_Closed.SecondLevel .MCDropDownHotSpot_.SecondLevel
{
background-image: url('../Images/Bullets/SecondDropDown.png') !important;
}

.MCDropDown_Open.SecondLevel .MCDropDownHotSpot_.SecondLevel
{
background-image: url('../Images/Bullets/SecondDropDown.png') !important;
}


...Don't laugh! lol CSS is my weakness. What am I doing wrong? Thanks in advance.

PS I am having to use a different image for SecondLevel dropdown images in the first place bc there seems to be a bug where if you use an arrow dropdown image, the topic looks open even when it's not. (see screenshot)

[NorthEast]

PS I am having to use a different image for SecondLevel dropdown images in the first place bc there seems to be a bug where if you use an arrow dropdown image, the topic looks open even when it's not. (see screenshot)

It's not a bug - it's your CSS:

Code: Select all

.MCDropDown_Open .MCDropDownHotSpot_{ ... }

That means it applies to all MCDropDownHotSpot_ classes everywhere inside .MCDropDown_Open - regardless of whether they're first, second, third level, etc.

Try this instead:

Code: Select all

.MCDropDown_Open > .MCDropDownHead > .MCDropDownHotSpot { background-image: url('../Images/Bullets/DropDownOpen.png') !important; }

.MCDropDown_Closed > .MCDropDownHead > .MCDropDownHotSpot { background-image: url('../Images/Bullets/DropDownClosed.png') !important; }

You don't need the second level style or image at all - unless the second level is supposed to be a different image.

[erinep23]

Thank you so, so much. I was about to throw my computer out of the window.

[JRtechw]

Hope the original author doesn't mind, but I was asked to provide right-hand-side toggle chevrons for the FAQ dropdowns that i supply to our app developers, to match the app. Most app frameworks seem to have right-side indicators for drop-down sections, so i thought this bit of work might be helpful for others writing dropdown text for apps out there.

To get dropdown images to shift to the right-hand side instead of the default left, I had to:

1. Disable the dropdown images in the Madcap|dropDown style.
2. Set a background image for the CSS selectors [.MCDropDown_Closed > .MCDropDownHead > .MCDropDownHotSpot] and [.MCDropDown_Open > .MCDropDownHead > .MCDropDownHotSpot].

So far this is the regular second-level dropdown workaround.
On the same selectors in step 2, set the following CSS:

3. Set display on the same selectors in Step 2 to 'block'.
4. Add a padding-right to allow for the right-side background image (as a background image, it will appear under any overlapping text instead of being pushed to the right).
5. Set the background position to top right.

So my CSS looks like this.

MadCap|dropDown
{
mc-disabled: false;
...
mc-closed-image: none;
mc-open-image: none; //disable default dropdown images
}

.MCDropDown_Closed > .MCDropDownHead > .MCDropDownHotSpot //this selector points to a span-level <a> element
{
display: block; //set <a> to behave like a block, so we can add background images and padding
padding-right: 25px; //Add right-side padding so image doesn't clash with text. padding size depends on your image
background-image: url('../Images/arrowDown.png') !important; //substitute whatever image you are using here
background-position: right top !important; // i set my chevrons to right top. you might prefer right middle, or bottom.
}

.MCDropDown_Open > .MCDropDownHead > .MCDropDownHotSpot
{
display: block;
padding-right: 25px;
background-image: url('../Images/arrowUp.png') !important;
background-position: right top !important;
}

This seems to be working for me so far, with no odd behaviour. Let me know if my CSS fails under certain conditions, or can be improved.

Cheers,

Jay.