shiny mainPanel width when including markdown

Question

I'm trying to include a "reactive" .Rmd file within a shiny application. It would summarize the user's choices and various conditions that arise. For whatever reason, I find including shiny within .Rmd documented, but not including the ability to knit .Rmd and have the output included inside a shiny app.

I find these very hard to reproduce, so here's my attempt using the hello world example from Rstudio. Here's the app as-is in chromium:

Next, I add a uiOutput element to ui.R:

# Show a plot of the generated distribution
mainPanel(
  plotOutput("distPlot"),
  uiOutput("mark")
)

I also add a corresponding output in server.R, taken from this sort of similar question:

output$mark <- renderUI({

  HTML(markdown::markdownToHTML(knit("./test.Rmd", quiet = TRUE)))

})

The contents of test.Rmd are this:

## something to print

```{r}

head(mtcars, input$bins)

```

When I run it, I now get this (screenshot footprint is the same):

I'm assuming there's some css or something in the knit document that's goofing things up, but I don't know. I can force the widths wider, but the main panel stays sort of centered.

I've tried includeMarkdown but wasn't able to get it to update based on input. Keep in mind that's the eventual hope -- I need something that can regenerate whatever is displayed based on changed input values. I realize I could do renderText or something, but the Rmarkdown format is so convenient as this is sort of a guide. I can write some documentation, then show the user what they've selected and what happens as a result.

It seems close... I just can't figure out why the page goes wonky.

I also tried stuff like style = "width: 1200px" or style = "width: 100%" without being able to get the ratio between the sidebarPanel and mainPanel back to normal.

Ideally, the output would look just like the original, but the knit results would show up under the current footprint of the plot.

score 3 · Accepted Answer · answered Oct 16 '16 at 20:37

3

It appears that the rmd code adds the following property to the body element:

max-width: 800px;

To remove this, add the following to your ui code (for example below sliderInput)

     tags$head(tags$style(HTML("
                               body {
                                  width: 100% !important;
                                  max-width: 100% !important;
                               }

                               ")))

answered Oct 16 '16 at 20:37

Xiongbing Jin

11,779
3
47
41

Genius! How did you find that?? I searched the source on the shiny app and didn't see it. I did just now knit the `test.Rmd` file and I see `.main-container { max-width: 940px; }`. This works like a charm. Now that I know what I'm looking for, I was even able to control for just one `output`: `div[id = blah] { max-width: 100% !important; }` for example. Sincere thanks for the quick investigation. – Hendy Oct 17 '16 at 02:30
1

I normally use the `Inspect element` context menu of Firefox to find out the style related to each element. Very easy and convenient to use. – Xiongbing Jin Oct 17 '16 at 03:21

score 2 · Answer 2 · answered Nov 27 '16 at 15:16

2

Set fragment.only=TRUE in markdownToHTML:

output$mark <- renderUI({

  HTML(markdown::markdownToHTML(knit("./test.Rmd", quiet = TRUE), fragment.only=TRUE))

})

answered Nov 27 '16 at 15:16

Stéphane Laurent

75,186
15
119
225

shiny mainPanel width when including markdown

2 Answers2