Highlighted

Adding padding to the bottom of the TOC

Participant ,
Apr 17, 2018

Copy link to clipboard

Copied

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.

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;

}

TOPICS
HTML5 layout

Views

505

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adding padding to the bottom of the TOC

Participant ,
Apr 17, 2018

Copy link to clipboard

Copied

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.

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;

}

TOPICS
HTML5 layout

Views

506

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 17, 2018 0
LEGEND ,
Apr 21, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2018 0
Participant ,
Apr 23, 2018

Copy link to clipboard

Copied

Hi. I am using the Charcoal_Grey layout.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 0
Participant ,
Apr 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 0
Participant ,
Apr 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
LEGEND ,
Apr 24, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Participant ,
Apr 25, 2018

Copy link to clipboard

Copied

Thanks very much. I will give this a try.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
Participant ,
Apr 25, 2018

Copy link to clipboard

Copied

Is this in the output, rather than the source?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
Participant ,
Apr 25, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
LEGEND ,
Apr 26, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2018 0
Participant ,
Apr 26, 2018

Copy link to clipboard

Copied

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

Mark

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2018 0
LEGEND ,
Apr 27, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 27, 2018 0
Participant ,
May 01, 2018

Copy link to clipboard

Copied

Thanks. I will try this.

Cheers,

Mark

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 01, 2018 0
Participant ,
May 01, 2018

Copy link to clipboard

Copied

Thanks very much for your advice. This works perfectly.

Best wishes,

Mark

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 01, 2018 0