TOC in Help Truncation Issue

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
daveed94
Posts: 7
Joined: Fri Dec 16, 2016 10:47 am

TOC in Help Truncation Issue

Unread post by daveed94 »

Hello,

We are using H&M 7.2 and a custom skin template edited from HM7-Help-Webhelp-Responsive.hmskin.

Currently we are outputting in the eBook format, and there is a truncation issue on the TOC icons, which seems quite random.

Any ideas where I can adjust the height or padding for the TOC in the skin file? Or however you think it can be fixed.

See screen shots.

Let me know,
David
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: TOC in Help Truncation Issue

Unread post by Tim Green »

Hi David,

Please update to Help+Manual 7.3. This won't solve your issue, but it's best to be on the current version. You can get the current installer here:

http://www.helpandmanual.com/downloads.html?upd

This issue with clipping icons in the TOC is an annoying bug in Internet Explorer, which is the HTML rendering engine you need to use for things like the EWriter viewer when you are working on Windows. (The Microsoft CHM viewer uses it as well, but has its own TOC interface.). You can adjust the TOC spacing and positioning with the block of code between two /* TOC LIST CSS */ comments in the TOC template in the skin. To do this, open the skin in Help+Manual and navigate down to Configuration > Publishing Options > WebHelp > Table of Contents.

To adjust this more easily replace the block of code between the /* TOC LIST CSS */ comments with this. See the comments below to see which things you need to adjust for positioning each item.

Code: Select all

/* TOC LIST CSS */

       /* Change space around entire TOC with the margin values top/right/bottom/left */
       #toc    { padding:0; margin:0px 0px 0px 0px }
	   
	   
       /* margin-top adjusts the space between items. margin-left adjusts the horizontal 
          position of the TOC entry with icon. negative values are allowed */
       #toc li { margin-top:2px; margin-left:0px; padding:1px; }
	   
       * margin-left adjusts the horizontal position of the TOC entry with icon.
	 Negative values are allowed. PREFER THIS SETTING TO PREVIOUS */
       #toc ul { padding-left:0; margin-left:10px }       
       
	   li[class*='heading'], li[class*='highlight'] {
		/* TOC Indent Size */
		padding-left: 20px !important;
		
		/* Position of TOC icons. First value is horizontal, second
		   value is vertical. You can use negative values. */
		background-position: 0px 2px !important;
	   }
/* TOC LIST CSS */
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
daveed94
Posts: 7
Joined: Fri Dec 16, 2016 10:47 am

Re: TOC in Help Truncation Issue

Unread post by daveed94 »

Hi Tim,

Thanks once again for your quick and helpful response. Actually though, your suggested fix did not work for me, I believe because you helped me change code in this skin file before.

However, you helping me remember where this can be edited in the skin file, led me to a solution. I fixed it in my skin file by modifying the TOC LIST CSS to:

/* TOC LIST CSS */
#toc { padding:0; margin:0 }
#toc li { margin-top:1px; margin-left:0px; padding:3px; }
#toc ul { padding-left:0; margin-left:-16px; }
/* TOC LIST CSS */

i.e. I reduced margin-top by one pixel and increased passing by one pixel. Looks good now in two different compiled help.

Thanks for your assistance.
Dave
Post Reply