Floating table of contents and plots produce extra whitespace at bottom

Publishing Your Results
1

Hi all!

I keep running into an issue where using a floating table of contents and plots is producing extra whitespace at the end of HTML output for an RMarkdown doc.

An example RMarkdown file looks something like this (the chunks are defined properly, I swear -- just difficult to display here)

---
title: "Plots and floating TOC"
output: 
  html_document:
    toc: true
    toc_float: true
---

# h1

## h1.2

# h2

## h2.2

```{r message = FALSE, echo = FALSE}
plot(mtcars)
```

```{r message = FALSE, echo = FALSE}
plot(mtcars)
```

```{r message = FALSE, echo = FALSE}
plot(mtcars)
```

and produces the following output: http://rpubs.com/sharlagelfand/plot_floating_toc

Initially it doesn't look like there is extra whitespace, but as you scroll down to the bottom it suddenly appears! This doesn't happen when the table of contents is fixed (toc_float: false). It does happen with plotly and ggplot2 as well as base plots as shown here.

Here is my session info:

devtools::session_info()
#> Session info -------------------------------------------------------------
#>  setting  value                       
#>  version  R version 3.5.1 (2018-07-02)
#>  system   x86_64, mingw32             
#>  ui       RTerm                       
#>  language (EN)                        
#>  collate  English_Canada.1252         
#>  tz       America/New_York            
#>  date     2018-08-14
#> Packages -----------------------------------------------------------------
#>  package   * version date       source        
#>  backports   1.1.2   2017-12-13 CRAN (R 3.5.0)
#>  base      * 3.5.1   2018-07-02 local         
#>  compiler    3.5.1   2018-07-02 local         
#>  datasets  * 3.5.1   2018-07-02 local         
#>  devtools    1.13.6  2018-06-27 CRAN (R 3.5.1)
#>  digest      0.6.15  2018-01-28 CRAN (R 3.5.1)
#>  evaluate    0.11    2018-07-17 CRAN (R 3.5.1)
#>  graphics  * 3.5.1   2018-07-02 local         
#>  grDevices * 3.5.1   2018-07-02 local         
#>  htmltools   0.3.6   2017-04-28 CRAN (R 3.5.1)
#>  knitr       1.20    2018-02-20 CRAN (R 3.5.1)
#>  magrittr    1.5     2014-11-22 CRAN (R 3.5.1)
#>  memoise     1.1.0   2017-04-21 CRAN (R 3.5.1)
#>  methods   * 3.5.1   2018-07-02 local         
#>  Rcpp        0.12.18 2018-07-23 CRAN (R 3.5.1)
#>  rmarkdown   1.10    2018-06-11 CRAN (R 3.5.1)
#>  rprojroot   1.3-2   2018-01-03 CRAN (R 3.5.1)
#>  stats     * 3.5.1   2018-07-02 local         
#>  stringi     1.1.7   2018-03-12 CRAN (R 3.5.0)
#>  stringr     1.3.1   2018-05-10 CRAN (R 3.5.1)
#>  tools       3.5.1   2018-07-02 local         
#>  utils     * 3.5.1   2018-07-02 local         
#>  withr       2.1.2   2018-03-15 CRAN (R 3.5.1)
#>  yaml        2.2.0   2018-07-25 CRAN (R 3.5.1)

Any thoughts or advice would be much appreciated!

1 Like
2

Sorry, not an answer but a minor note...

The trick is to use 4 backticks! :nerd_face:
https://forum.posit.co/t/faq-how-to-make-your-code-look-nice-markdown-formatting/6246/9?u=jcblum

1 Like
3

More to the point, thanks very much for the reprex! Can you also provide a screenshot? I can’t reproduce what you describe, but I’m on a tablet right now. Sounds like maybe the phenomenon interacts with bootstrap’s responsiveness?

image
image2048×1536 439 KB

4

Taking the example and looking at the rendered page in Chrome with the dev tools shows that this extra space is a div put in by R Markdown:

<div class="tocify-extend-page" data-unique="tocify-extend-page" style="height: 598px;"></div>

It seems like tocify.js, the JS library that produces the table of contents, puts in this div. I'm not sure the reason at this point but I'll find out why.

2 Likes
5

Looking at the tocify.js GitHub README (and by generally googling around with 'tocify-extend-page') it seems this is a feature (not a bug apparently) that auto extends a page. Here's the line from the README explaining why:

Supports a page extender option to make sure a page is big enough to scroll to all table of content items

In the R Markdown source file floating.html, options for extending a page are set:

        // **extendPage**: Accepts a boolean: true or false
        // If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased
        extendPage: true,

        // **extendPageOffset**: Accepts a number: pixels
        // How close to the bottom of the page a user must scroll before the page is extended
        extendPageOffset: 100,

It seems like these are the only options for extending the page. It doesn't allow control for exactly how much space through (it looks like tocify handles the exact height in pixels).

3 Likes
6

Thank you! Should have checked the FAQs :slight_smile:

1 Like
7

I think that @rich_i has helped me solve it, but this is what it looks like!

extra%20whitespace
extra%20whitespace1011×851 25.4 KB

8

Thank you so much! I was able to remove all the whitespace it by putting

<div class="tocify-extend-page" data-unique="tocify-extend-page" style="height: 0;"></div>

at the bottom of my RMarkdown file -- it looks to overwrite whatever is produced by tocify.js. The page is more than long enough to scroll all of the TOC contents, but it's good to understand why that feature exists.

Really appreciate it, so happy to have this gone :pray:

7 Likes
9

If your question's been answered (even by you!), would you mind choosing a solution? It helps other people see which questions still need help, or find solutions if they have similar problems. Here’s how to do it:

1 Like