Hendy Hendy - 1 month ago 13
R Question

shiny mainPanel width when including markdown

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:

full-size

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):

cramped

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.

Answer

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;
                               }

                               ")))
Comments