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)
SecondLevel Dropdown Images
-
- Sr. Propeller Head
- Posts: 124
- Joined: Fri Jun 01, 2012 2:54 pm
- Location: Austin, Texas
- Contact:
SecondLevel Dropdown Images
You do not have the required permissions to view the files attached to this post.
Re: SecondLevel Dropdown Images
It's not a bug - it's your CSS:erinep23 wrote: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)
Code: Select all
.MCDropDown_Open .MCDropDownHotSpot_{ ... }
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; }
-
- Sr. Propeller Head
- Posts: 124
- Joined: Fri Jun 01, 2012 2:54 pm
- Location: Austin, Texas
- Contact:
Re: SecondLevel Dropdown Images
Thank you so, so much. I was about to throw my computer out of the window.
Re: SecondLevel Dropdown Images
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.
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.