Dropdown Icon Spacing Issue

[lc4466]

Okay guys, I've got another one for you that I can't figure out. I have my dropdown icons swapped out and set to the right and it mostly works great, but if the text of the header is too long or becomes too long in a mobile view, it sometimes comes up against the icon or even overlaps it. It looks like this is because the icons are getting converted to a background-image in the css output. So then I tried to put the header text itself inside a span and add margins and padding there, but that didn't seem to do anything either. Any ideas for me?

Code: Select all

MadCap|dropDownHotspot
{
	display: block;
	color: #50504a;
}

MadCap|dropDownHead
{
	padding-left: 8.5px;
	padding-right: 8.5px;
	padding-bottom: 7.5px;
	padding-top: 7.5px;
}

MadCap|dropDownBody
{
	border-left: solid 1.5px #dcdcdc;
	padding-left: 15px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

MadCap|dropDown
{
	border-bottom: solid 0px #dcdcdc;
	border-top: solid 1px #dcdcdc;
	mc-image-position: right;
	mc-closed-image: url('../Images/Icons/Content/Down-12.png');
	mc-open-image: url('../Images/Icons/Content/Up-12.png');
	margin: 15px;
}

dropdown.png

[Chicago_HPT]

It looks like MadCap may have a "shadow style class" that applies to the dropdown icon after compile. Try adding the following style class to your CSS and add a margin-left value. For example:

Code: Select all

.MCDropDown_Image_Icon {
    margin-left: 15px;
}

Naturally, substitute your own margin value.

I suppose one consequence of this approach could be that it pushes the icon to the right but it might at least be a first step in figuring out how to put space between the text and the icon.

I hope that helps.

Cheers,
-jeff

[lc4466]

That doesn't seem to affect it either unfortunately. I think the issue truly is the conversion to a background image because by definition backgrounds don't have margins against other objects.

In the Topics.css file, it's converting the images to this:

Code: Select all

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage.MCDropDownHotSpot
{
	background-position: right;
	background-image: url('Up-12.png');
	padding-right: 1px;
	padding-left: 0;
}

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage.MCDropDownHotSpot
{
	background-position: right;
	background-image: url('Down-12.png');
	padding-right: 1px;
	padding-left: 0;

Trying to add the margin (or padding) directly there does not work either.

[lc4466]

My best workaround so far has been to put the header text inside a div and give it a 98% width. It's not my favorite solution but it does seem fix the issue, so just in case anyone else is struggling with the same!