Rmarkdown überlappende Ausgabe

Question

Ich habe ein Problem gemeldet https://github.com/rstudio/rmarkdown/issues/967 und frage mich, gibt es eine Problemumgehung (wie man das funktioniert) dafür?

Reproduzierbare Beispiel unten (variiert n und nGruppe den Effekt zu sehen - keine Überlappung, wenn n = 100 und nGruppe = 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

im HTML Mit Blick auf Ihrem Beispiel erzeugt, I sehen eine Reihe von div Tags, die wie folgt aussehen:

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

Beachten Sie die Inline-Stil, der die Höhe auf 500 Pixel festlegt. Allerdings ist der Inhalt innerhalb der div viel größer als 500 Pixel, so dass es über die Grenze der div überläuft.

Ich bin mir nicht sicher, woher die 500px kommt, aber als Workaround können Sie es mit einem anderen Stil überschreiben. Zum Beispiel, fügen Sie diese an der Spitze Ihres RMarkdown (nach dem Header):

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

---

Oder, wenn Sie Ihre RMarkdown mit CSS ordentlich zu halten bevorzugen, setzen

div.datatables { 
    height: auto !important; 
} 

in einem separaten CSS-Datei, und verknüpfen Sie sie in der RMarkdown-Kopfzeile wie folgt:

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