Voltage Overlapping Rmarkdown

Question

I reported a problem https://github.com/rstudio/rmarkdown/issues/967 and I'm wondering if there is a workaround (how to make this work) for this?

The reproducible example is below (change n and nGroup to see the effect - do not 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 that 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;"> 

Pay attention to the inline style, which sets the height to 500 pixels. However, the content inside the div much higher than 500 pixels, so it overflows beyond the border of the div .

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

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

---

Or, if you want your RMarkdown to be cluttered with CSS, put

 div.datatables { height: auto !important; } 

in a separate CSS file and a link to it in the RMarkdown header, for example:

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