Text Not Appearing in Rmarkdown?

Question

I created an html file called "widgets_t.html" (several plotly plots combined together). Using this tutorial (https://beta.rstudioconnect.com/jjallaire/htmlwidgets-showcase-storyboard/htmlwidgets-showcase-storyboard.html) as a demo as well as the answer provided here (How to create a dropdown menu in flexdashboard?), I tried to create a Rmarkdown/Flexdashboard document. Here is the code that I am using (for this example, I just used the same html input and the same text for brevity purposes ):

---
title: "maps"
output:
   flexdashboard::flex_dashboard:
        storyboard: true
        social: menu
        source: embed
---
```{r setup, include=FALSE}
library(flexdashboard)
```

```{css}
.storyboard-nav .sbframelist ul li {
    height: auto;
}
```


Page 1
===================================== 
   
Column {.tabset}
-------------------------------------
   
### Title 1


<object type="text/html" width="1500" height="1500" data="widgets_t.html"></object> 




https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic



 
### Title 2  {.tabset .tabset-dropdown}
    

<object type="text/html" width="1500" height="1500" data="widgets_t.html"></object> 




https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic


Page 2
=====================================
<object type="text/html" width="1500" height="1500" data="widgets_t.html"></object> 


- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic

Page 3
=====================================
<object type="text/html" width="1500" height="1500" data="widgets_t.html"></object> 


- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic

The above code runs successfully and renders an output in the format I was expecting, but the text (e.g. "Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON." ) is not appearing.

Does anyone know how I can fix this problem?

Thank you!

PS: Here is an example of "widgets_t.html":

library(plotly)
libtary(htmltools)
library(htmlwidgets)

fig <- plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)

doc <- htmltools::tagList(
    div(fig, style = "float:left;width:50%;")
)

htmltools::save_html(html = doc, file = "widgets_t.html")

score 6 · Accepted Answer · answered Aug 31 '22 at 04:14

I'm not sure that I entirely understand what you're looking for. You mentioned a tutorial, but the link brings me to a dashboard, not a tutorial. That being said, I'm going to provide my answer and explanation. You'll just have to let me know if this is what you were looking for.

Alright, I'm guessing it is just a typo in your question (I've got plenty of those!) However, the call for the library htmltools, library is spelled wrong. I would hate for that to be the source of your problems. Although, you indicated it was rendering the graph, so I'm guessing that's not the problem.

I think you want to render this with tab sets, instead of a storyboard.

To simplify things for the sake of this answer, I didn't create an external HTML file. Instead of the height and width you currently have, you're going to use percentages. This will maximize the use of space within the parent div.

So instead of your current setup for <object>, you can use this.

<object type="text/html" data="widgets_t.html" style="width:100%; height:100%;" />

I'm not sure why you chose to go with embedding HTML instead of rendering it directly. If there is a problem, that's a likely source of contention. For example, widgets have a default of 100% width and 400px height...Yuck! When you render them inline, they just seem to 'listen' better. (Just my opinion!)

I added styling you don't need, in addition to styling you do need. Things like border, padding, background color, and line height can all be dropped without any consequences to the organization. I just thought it improved the appearance.

You should also notice that I gave 70% of the width to the plot and 30% to the text column. You can definitely adjust these values, but they should total 100% between the two.

<style>
.pics {
  float:left;
  width:70%; 
  height:90vh;
}
.words {
  float:right; 
  width:30%; 
  height:90vh;
  padding: 10px; 
  border-style: outset; 
  border-width: 1px; 
  background-color: #fdfdfd;
  line-height: 2em; /* this is double-spacing lines of text the html way */
}
</style>

Before each set of object tags, you'll include <div><div class="pics">. For example, the first one will look like this:

Page 1
===================================== 
   
Column {.tabset}
-------------------------------------
   
### Title 1
    
<div>
<div class="pics">

Between your object calls and the bullets, you'll use </div><div class="words">. The first placement looks like this:

</div>
<div class="words">

https://rstudio.github.io/leaflet/

- Interactive panning/zooming
- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.
- Create maps right from the R console or RStudio

After the bullet points, you have to close out the div tags. That's going to look like this.

- Embed maps in knitr/R Markdown documents and Shiny apps
- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns
- Use map bounds and mouse events to drive Shiny logic

</div></div>

Hi Kat! Thank you so much for your answer! This is working perfectly! I posted the full answer below in case anyone wants to copy/paste it in one chunk! In 21 hours, I will be able to accept your answer as the official answer! Thank you so much again! — stats_noob, Aug 31 '22 at 05:07
@ Kat: H Kat, I am working on a similar question here - https://stackoverflow.com/questions/75348270/r-modifying-an-r-markdown-tutorial can you please take a look at it if you have time later? thank you so much! — stats_noob, Feb 05 '23 at 03:11

score 3 · Answer 2 · answered Aug 31 '22 at 05:08

Using the (amazing) code provided by @Kat, here is the answer in one chunk:

---
title: "maps"
output:
   flexdashboard::flex_dashboard:
        storyboard: true
        social: menu
        source: embed
---

<style>
.pics {
  float:left;
  width:70%; 
  height:90vh;
}
.words {
  float:right; 
  width:30%; 
  height:90vh;
  padding: 10px; 
  border-style: outset; 
  border-width: 1px; 
  background-color: #fdfdfd;
  line-height: 2em; /* this is double-spacing lines of text the html way */
}
</style>




```{r setup, include=FALSE}
library(flexdashboard)
```

```{css}
.storyboard-nav .sbframelist ul li {
    height: auto;
}
```


Page 1
===================================== 
   
Column {.tabset}
-------------------------------------
   
### Title 1


   
<div>
<div class="pics">

<object type="text/html" data="widgets_t.html" style="width:100%; height:100%;" /> 

</div>
<div class="words">

https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic


</div></div>

 
### Title 2  {.tabset .tabset-dropdown}
    

<div>
<div class="pics">


<object type="text/html" data="widgets_t.html" style="width:100%; height:100%;" /> 

</div>
<div class="words">



https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic

</div></div>



Page 2
=====================================
<div>
<div class="pics">


<object type="text/html" data="widgets_t.html" style="width:100%; height:100%;" /> 

</div>
<div class="words">


- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic

</div></div>


Page 3
=====================================


<div>
<div class="pics">

<object type="text/html" data="widgets_t.html" style="width:100%; height:100%;" /> 

</div>
<div class="words">


- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic

</div></div>

Thanks @Kat!

chagas98 · Answer 3 · 2022-08-29T07:19:56.220

2

I tested here and the text "compose maps.. etc" appears perfectly, shows on the first page and others. Can you give more details? (page? just this line? sessionInfo(), etc)

screenshot

EDIT

I didn't understand the question right earlier.

You have to edit the HTML proportions and adjust your text accordingly. example:

First you should change image proportions

<object type="text/html" width="1000" height="500" data="widgets_t.html"></object>

Second, embebed the next text in a HTML ><

<html>
- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic      
    </html>

The result: new screenshot

edited Aug 29 '22 at 07:19

answered Aug 29 '22 at 07:01

chagas98

36
3

@ chagas98: thank you for your answer! Is there a way to keep the same formatting as the tutorial? thank you! – stats_noob Aug 29 '22 at 16:26
Tricky question for me (not an expert). I would say it depends on what format language you are more comfortable working in. These [examples](https://bookdown.org/yihui/rmarkdown-cookbook/multi-column.html) explore the markdown to build a div/column and setting up each image/text for each column/row (like a table). I ran in your code and it worked fine, just complicated work to adjust the proportions. But you can explore CSS/HTML, etc – chagas98 Aug 29 '22 at 18:38

Text Not Appearing in Rmarkdown?

3 Answers3

Linked