Markdown break column width fluidPage in Shiny

According to the title. To illustrate:

md = "# Lorem ipsum

1. dolor sit amet, amet ut integer vitae, justo pretium sed praesent, velit vitae proin molestie metus nec. A mi id quisque libero, in sed urna non etiam iaculis id, purus cum sit et. Maecenas purus sit rhoncus fringilla velit, etiam et justo risus pharetra, leo convallis ut platea, turpis tellus urna sed, leo scelerisque velit nam urna. Felis tincidunt fringilla, suspendisse molestie dui, phasellus aliquam nec adipiscing enim fusce metus, vulputate dictumst etiam est a. Rhoncus ut, netus aenean rutrum vehicula ipsum, maecenas nec ut mauris."

shinyApp(
  fluidPage(
    fluidRow(
      column(3,
             selectInput('countries', 'countries', state.name, "country")
      ),
      column(9,
             plotOutput('plot'),
             uiOutput('markdown')
      )
    )
  ),

  function(input, output, session) {
    output$plot <- renderPlot({
      plot(rnorm(100))
    })
    output$markdown <- renderUI({
      HTML(markdown::markdownToHTML(text = md))
    })
  },
  options = list(launch.browser=T)
)

      

What produces:

enter image description here

Compare this to render text:

shinyApp(
  fluidPage(
    fluidRow(
      column(3,
             selectInput('countries', 'countries', state.name, "country")
      ),
      column(9,
             plotOutput('plot'),
             textOutput('txt')
      )
    )
  ),

  function(input, output, session) {
    output$plot <- renderPlot({
      plot(rnorm(100))
    })
    output$txt <- renderText(md)
  },
  options = list(launch.browser=T)
)

      

This is how it should look:

enter image description here

This is mistake?

+3


source to share


1 answer


You need an option fragment.only = TRUE

in the call markdownToHTML()

:

 output$markdown <- renderUI({
      HTML(markdown::markdownToHTML(text = md,
                                    fragment.only = TRUE))
    })

      



After adding this application, the application looks exactly like your second example:

enter image description here

+3


source







All Articles