How to fix topic TOC overflowing the content container

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
TheGreatAndPowerfulOz
Sr. Propeller Head
Posts: 130
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

How to fix topic TOC overflowing the content container

Post by TheGreatAndPowerfulOz »

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:
TopicTOCOverflow_before.gif
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):
TopicTOCOverflow_after.gif
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 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
Post Reply