TOC overlaying wide content

[glenncarr]

We have a few pages that display some wide tables. The rightmost columns have links that are not clickable due to the "In This Article"/TOC div element. For example:

Also, when scrolling down the TOC overlays the content. Same above page after scrolling down:

Any suggestions other than not using tables for the content? Would it be possible on a page-by-page basis to disable the TOC or make it always display at the top of the page as it does when the browser window is very narrow?

Thanks, Glenn

[EWSoftware]

I'm not seeing that behavior. The divs create columns and the content is typically restricted to the width of each column (TOC on the left, content in the middle, and In This Article on the right). Can you provide an example that shows the behavior you are seeing?

[glenncarr]

Here's an example project: https://github.com/glenncarr/shfb-toc-1047

Here's what I'm seeing: https://github.com/glenncarr/shfb-toc-1047/blob/master/toc-example-problems.gif

[EWSoftware]

The problem is caused by long, unbroken strings of text that cannot be word wrapped. They seem to cause a minimum column width which makes the div exceed its normal bounds and causes the overlapping. You can work around it to some extent by inserting HTML word break elements (wbr) in the long text strings so that the browser knows were it can break the text and allow wrapping. It's not a valid MAML element but due to the way the elements are handled, it'll be recognized and passed through anyway.

<entry>
    <legacyBold>XXXXXXX<wbr/>XXXXXXXXXXX_<wbr/>XXXXXXXX_<wbr/>XXXXXXXXXXX</legacyBold>
</entry>

I do that in the link text for API members, but it looks like I missed a number of places so it's not consistent and I'll have to go back through fix those up. My knowledge of HTML and CSS is marginal so I'm not sure if there's a way to prevent the overlapping and just make it scroll horizontally instead or hide it if it overlaps. For me, it would probably be easier to just provide an option to hide the In This Article div for the page on a case-by-case basis.

[glenncarr]

We actually generate the MAML for this particular page with another tool as a build step before finally building the .shfbproj. It would be possible to add <wbr/>'s, those specific values are symbols that would look strange if broken. I'd thought about making that into a definitionTable, but it loses its value without the other information in the columns.

For me, it would probably be easier to just provide an option to hide the In This Article div for the page on a case-by-case basis.

That would be great and very much appreciated.