Adding padding to the bottom of the TOC

[MDennetti]

Hi. I have noticed a problem viewing Responsive HTML5 output in the Edge browser (RoboHelp 2017). When you expand the Table of Contents (TOC) so that it fills the full height of the page, and then point the cursor at the last entry in the TOC, the displayed popup obscures the TOC entry. I understand this is standard behaviour for the Edge browser, but I wondered if there is a way to avoid this behaviour, perhaps by adding some padding to the bottom of the TOC. Any advice would be appreciated.

[Willam van Weelden]

Which layout are you using? I just gave the Azure Blue layout a spin (desktop) and it seems to show the same behaviour as Chrome.

[MDennetti]

Hi. I am using the Charcoal_Grey layout.

[MDennetti]

Some additional info: we are seeing the same behaviour on multiple machines and for multiple users.

[MDennetti]

Hi. Is there anything you could suggest to get round this behaviour please?

[Willam van Weelden]

Hi,

Sorry about the delay. I had to make some time to open RH and test it out. The quickest way to add the padding, is to add some whitespace at the end of the TOC holder element. Doing it in the parent element will make sure you won't get strange behaviour for the TOC content.

Use an editor like Notepad++ to open the Layout.css file of the Charcoal Grey layout. Don't use the RoboHelp editor!

Paste the following code to add the spacing:

div.toc-holder {

padding-bottom: 20px !important;

}

You can adjust the padding so that is works for your use case. I have added the !important rule to overwrite the padding on mobile devices. That saves typing out all the selectors for those use cases. If you want to only apply the padding to desktop, simply leave the !important out.

[MDennetti]

Thanks very much. I will give this a try.

[MDennetti]

Is this in the output, rather than the source?

[MDennetti]

Hi. Adding this code to the source automatically adds it to the output. However, I cannot see any effect in the output. Does it need to be added in a specific position in the layout.css?

Thanks

[Willam van Weelden]

The position doesn't matter. I just put it at the top of the CSS file.

You can put it in the output or in the source. The easiest way to test is, is to add it in the output and see what happens. If it works, you can copy it to the RoboHelp output.

[MDennetti]

Thanks. Unfortunately, I cannot see any effect from adding this. Have you found that this fixes the described problem for the Edge browser?

Mark

[Willam van Weelden · Accepted solution]

That's what I get for testing Chrome... In edge, it doesn't take. This one does!

div.toc-holder ul.toc {

    padding-bottom: 200px !important;

}​

[MDennetti]

Thanks. I will try this.

Cheers,

Mark

[MDennetti]

Thanks very much for your advice. This works perfectly.

Best wishes,

Mark