Text Not Appearing in Rmarkdown?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. antonoyaro8 is looking for an : ：

Hello. I am trying to make the text (ie, bullet points) appear on the right hand side of this screen. the same way that is done in tutorial, For some reason. I can't get this to work? Can someone please take a look at this and help me figure this out? Thanks!

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 (eg " 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")

Answer 1

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>

Answer 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

Answer 3

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!