How to disable collapsed-by-default behavior in HTML5 skins?

shannong · Post by **shannong** » Sun Sep 14, 2014 7:23 am

Because of a serious bug with table rendering in the HTML5 skins, I'd like to know how to force all topics to initially render as fully expanded in HTML5 outputs. The bug has been reported to MadCap, but until fixed, the default behavior of HTML5 skins is unacceptable. (To see the reported bug and how to reproduce it for yourself, look past the code block below.)

Edit: After some more digging, it seems the problem really revolves around the behavior of "drop-down text" elements (<MadCap:dropdown>). Table content within the child <MadCap:dropDownBody> does not render correctly when the HTML5 skin's "Expand All" button is used. Such table content renders correctly only when the drop-down hotspot is manually clicked. Based on this, I'm not sure that any global setting to pre-expand all such drop-down content in the skin is feasible, if such a setting even exists. It's a shame to be forced to refrain from using the drop-down text functionality in HTML 5 entirely until MadCap fixes the underlying rendering bug.

Anyone have any bright ideas for manipulating the CSS styles for the drop-down elements to get around this behavior and render the interior tables with a correct width that respects the browser window dimensions?

Code: Select all

MadCap|dropDown
{
	margin-bottom: 6px;
	margin-top: 6px;
	mc-closed-image: url('../Images/DropDownClosed.png');
	mc-disabled: false;
	mc-open-image: url('../Images/DropDownOpen.png');
}

MadCap|dropDown.Footer
{
	mc-closed-image: url('../Images/DropDownSmallClosed.png');
	mc-open-image: url('../Images/DropDownSmallOpen.png');
}

MadCap|dropDown.SecondLevel
{
	margin-left: 10px;
	mc-closed-image: url('../Images/DropDownClosedSecondLevel.png');
	mc-open-image: url('../Images/DropDownOpenSecondLevel.png');
}

MadCap|dropDownBody
{
	border-bottom: solid 1px #bed230;
	mc-disabled: false;
}

MadCap|dropDownBody.FooterTopicMaster
{
	border-bottom-color: #b3b3b3;
}

MadCap|dropDownBody.Final
{
	border-bottom: 0px;
}

MadCap|dropDownHead
{
	mc-disabled: false;
}

MadCap|dropDownHotspot
{
	color: #404040;
	font-size: 0.9em;
	font-weight: bold;
	mc-disabled: false;
}

MadCap|dropDownHotspot:hover
{
	color: #BED230;
	font-weight: bold;
}

MadCap|dropDownHotspot.Footer
{
	color: #ffffff;
	font-size: 0.8em;
}

MadCap|dropDownHotspot.Footer:hover
{
	color: #BED230;

Here's the bug and how to see it for yourself, if you're interested:

Bug summary:

Your "Expand All" button breaks the correct behavior of table widths in your HTML5 skins. Tables render with a proper width that fits in the browser window only if you manually expand the specific section that contains the table. If you instead use the "Expand All" button in the HTML5 skin, table widths will overflow the right border of the browser window, and you will not have a horizontal scrollbar at the bottom to enable viewing of the truncated content. This happens in all three responsive mediums of the skin.

To reproduce:

1. View the current Madcap Flare online documentation available from the Madcap Support site (HTML 5).

2. Navigate to "Tour of the Workspace" > "XML Editor".

3. Manually expand only the section "buttons and sectionsâ€”bottom of xml editor when using web layout mode". Notice that the table rendering is perfect.

4. Click the "Expand All" button in the skin, then scroll down to the same section. Notice that the table width far exceeds the right border of the browser window, with no horizontal scroll available to view the truncated content.