How to fix topic TOC overflowing the content container

This forum is for all Flare issues related to styles, stylesheets and XML.

How to fix topic TOC overflowing the content container

Postby TheGreatAndPowerfulOz on Fri Mar 22, 2019 11:51 am

Every section (or "chapter") of our HTML5 Top Navigation online Help system includes an introductory topic, whose content is typically short and sweet—just enough to give the user an idea of what the topics in that section will cover. Each topic, including the intro topic, includes a contextual TOC on the right side of the page.

In most cases the topic TOC isn't very lengthy, however one of the Help system sections happens to include quite a few topics. As a result, the topic TOC extends far beyond the "fold" of the screen, while the topic content occupies very little vertical space. This is not a problem in and of itself, since the user can just scroll down to see all the TOC items. The issue I find is that the TOC actually overflows the topic content container! :o

While even this is not a huge deal, I don't find it very aesthetically pleasing. Notice in the screen animation below that there is a gray horizontal "break" that represents the bottom of the topic content container (whose background color is white). Beyond that is the overflow area (whose background color is also white). As the user scrolls down, we see that the TOC spills out into the overflow area:


I found a pretty easy CSS fix for this, which was to add the following to my "OnlineStyles.css" stylesheet:
Code: Select all
div.content-container {
   overflow-y: auto;

The result? The topic content container height now stretches to accommodate the topic TOC, as necessary (no more spilling over the bottom of the container):


I hope this helps anyone else that might have this issue. 8)
You do not have the required permissions to view the files attached to this post.
Austin Wright

Flare 2020 (16.0.7426.25547) :: TopNav HTML5 / PDF output
Sr. Propeller Head
Posts: 115
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 11 guests