Numbered list format problem in top navigation output

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
John_Wilkes
Jr. Propeller Head
Posts: 2
Joined: Fri Sep 25, 2015 7:37 am

Numbered list format problem in top navigation output

Post by John_Wilkes »

I've got a problem with the output formatting when using top navigation. The picture below shows the problem. It's consistent across all topics where these conditions occur.

I'm using a paragraph style for numbered lists. In order to get the right formatting, Flare puts these paragraphs into a table. As far as I can tell, this table crashes into the side menu, and is then pushed down below the menu in order to avoid a collision. The result is a gap between text and numbered list. It is quite large in some topics and looks awful.

I've tried setting

Code: Select all

width: 70%
in the table class (the side menu is 25% wide) in the hope of forcing Flare to reduce the width. This works for other tables in my project, but not the numbered lists.

Does anybody have any solution to this? Am I going up the wrong path completely?
You do not have the required permissions to view the files attached to this post.
kwag_myers
Propellus Maximus
Posts: 810
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: Numbered list format problem in top navigation output

Post by kwag_myers »

I'd like to know more about why you're using a paragraph style. Could you post the properties for that style?

As for the table issue (and I have to say I'm not convinced that Flare is actually doing that conversion), check the display property of the ol and p styles. I think they both default to block and my guess it this is the cause of the issue. I would try adding this to your CSS (where x represents your paragraph style):

Code: Select all

ol li p.x
{
   display: inline;
   width: 70%;
}
If it really is a table, another option is to put your cursor anywhere in the text of the first list item and Ctrl+Shift+C. You may need to go up a line or two in the HTML code that displays to get to the table class, which will show in the lower-right pane. Add that class to your main CSS with a 70% width and try a new output.
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
John_Wilkes
Jr. Propeller Head
Posts: 2
Joined: Fri Sep 25, 2015 7:37 am

Re: Numbered list format problem in top navigation output

Post by John_Wilkes »

I've got two styles, one for setting the list to "1", the other for continuing the numbering. The advantages of doing this are:
1. It is possible to reference individual list items using an xref.
2. The formatting can be better controlled than using the standard HTML <ol>

There are doubtless others, as this seems to be quite a common approach. At least, I have seen others on these forums using this method.

Here are the styles:

Code: Select all

p.nummerierteListe_1
{
	mc-auto-number-format: 'N:{n=1}. ';
	mc-auto-number-position: outside-head;
	mc-auto-number-offset: 20px;
	margin-left: 20px;
	margin-bottom: 6px;
	margin-top: 3px;
}

p.nummerierteListe_ff
{
	margin-left: 20px;
	mc-auto-number-format: 'N:{n+1}. ';
	mc-auto-number-position: outside-head;
	mc-auto-number-offset: 20px;
	margin-top: 3px;
	margin-bottom: 6px;
}
This is an example of my source for the topic shown in the graphic in my previous post:

Code: Select all

<p class="Grundtext">To open the <span class="Taste">Administration</span>:</p>
<p class="nummerierteListe_1" MadCap:autonum="1. ">Click <img src="../Resources/Images/RMS_Icons_etc/icons/16/Administration_16.png" /><span class="Taste">Administration</span>in the menu bar.</p>
This is the corresponding output from Flare:

Code: Select all

<p class="Grundtext">To open the <span class="Taste">Administration</span>:</p>
	<table class="AutoNumber_p_nummerierteListe_1" style="width: 100%; margin-left: 0;" cellspacing="0" cellpadding="0">
		<col style="width: 0px;" />
		<col style="width: 20px;" />
		<col style="width: auto;" />
		<tr>
			<td valign="top" />
			<td class="AutoNumber_p_nummerierteListe_1" valign="top"><span>1. </span>
			</td>
			<td class="AutoNumber_p_nummerierteListe_1" valign="top" data-mc-autonum="1. ">Click <img src="../Resources/Images/RMS_Icons_etc/icons/16/Administration_16.png" /><span class="Taste">Administration</span>in the menu bar.</td>
		</tr>
	</table>
There can be no doubt that Flare is doing this.

On looking at this source, it occurred to me that I could define the table class and try to adjust that. Unfortunately, the output from Flare has these inline styles (width: 100%) that override my stylesheet :x . Flare is doing precisely what Madcap consistently advises users not to do... Changing this in the output does the trick, although this is no solution and does not even qualify as a workaround.

I guess this will have to go as a bug/ feature request to Madcap. If anybody has an alternative way of solving this problem, I would be most interested.
Post Reply