Rmarkdown overlapping output

Question

I reported an issue https://github.com/rstudio/rmarkdown/issues/967 and am wondering is there a workaround (how to make this work) for this?

Reproducible example below (vary n and nGroup to see the effect - no overlap when n = 100 and nGroup=10):

---
title: "Test links to sections in DT"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo=FALSE)
knitr::opts_chunk$set(message=FALSE)
knitr::opts_chunk$set(warning=FALSE)

## DT Test

```{r echo=FALSE}
library(DT)

n <- 1000
nGroup <- 100

testDF <- data.frame(text=paste0("Section", 1:n),
                     number=1:n,
                     group=rep(1:(n/nGroup), n/nGroup))

datatable(head(testDF), caption="Whole table", rownames=FALSE, escape=FALSE, options=list(paging=FALSE, info=FALSE))

getDT<-function(x) {
  a <- list()
  a[[1]] <- htmltools::tags$h3("test1")
  a[[2]] <- datatable(x[, c("text", "number")], caption=htmltools::tags$caption(style="caption-side: top; text-align: left;", "Group: ", htmltools::strong(x$group)), rownames=FALSE, escape=FALSE, filter=c("none"), options=list(paging=FALSE, info=FALSE))
  a[[3]] <- htmltools::tags$h4("test1")

  return(a)
}

res <- lapply(split(testDF, testDF$group), getDT)

htmltools::tagList(res)
```

Answer 1

Looking at the HTML your example produces, I see a bunch of div tags that look like this:

<div class="datatables html-widget html-widget-static-bound"
     id="htmlwidget-3efe8ca4aa087193f03e"
     style="width:960px;height:500px;">

Note the inline style that sets the height to 500 pixels. However, the content inside the div is much taller than 500 pixels, so it's overflowing past the boundary of the div.

I'm not sure where the 500px is coming from, but as a workaround you can override it with a different style. E.g., add this at the top of your RMarkdown (after the header):

<style type="text/css">
    div.datatables { height: auto !important;}
</style>

---

Or, if you prefer to keep your RMarkdown uncluttered with CSS, put

div.datatables {
    height: auto !important;
}

in a separate CSS file, and link to it in the RMarkdown header, like this:

---
title: "Test links to sections in DT"
output:
  html_document:
    css: overlap_workaround.css
---