I am trying to create a paged pdf report in R, using pagedown together with htmltools::tagList. Each page in the report is supposed to bring together field survey results, mainly images ande tables, from a single site.
Rendering the content is no problem in itself. But when I try to nest html elements within the taglist, parent and first child elements are rendered, while "grandchild" elements are not. Instead, grandchilds show up as text within their parent div. Why is this, and how do I get around it?
The reason I want to nest divs this way is that this would be a convenient way to make sure that all content that belongs together actually end up on the same page in the pdf, i.e. by wrapping elements that belong together in a main container, for which I can more easily control dimensions.
Not sure where the issue lies, if it´s an htmltools issue, a html issue, or a me issue. Thanks in advance for any help!
Please see the simple example below that reproduces the "issue", and image of the output I get.
---
title: "My Report"
output:
pagedown::html_paged:
toc: false
number_sections: false
fontsize: 8pt
classoption: a4paper
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shiny)
library(htmltools)
```
```{r echo=FALSE, results='asis'}
# URL to the R logo image
r_logo_url <- "https://www.r-project.org/logo/Rlogo.png"
# Create tagList with html elements
my_tagList <- tagList(
p("This is text and the R Logo outside of parent div - works as expected"),
img(src = r_logo_url, alt = "R Logo", style = "width: 100px;"),
div(
style = "border: 2px solid blue;",
p("This is the R Logo within the parent div - works as expected"),
img(src = r_logo_url, style = "width: 100px;"),
# Here is where the problems start - the div is rendered, but elements within it are not. Instead they show up as text. Why, and how to get around it?
div(
style = "border: 2px solid black; margin: 5px;",
p("This text and the image below, within child div, are not rendered. They only show up as text. Why?", style = "border-bottom: 2px solid black;"), # text within grandchild is not rendered
img(src = r_logo_url, style = "width: 100px;") # image within child div
)
)
)
# Print or render the tagList
print(my_tagList)
```
This is the output I get from running the example: Output from code
