htmlrshinyshinybs

How to format text using shiny html?


In the example code at the bottom, I'm trying to format the text rendered inside the shinyBS package popify() function as shown in the image below (reduce bullet indentation and right justify the text). I believe this code uses shiny html. How could this be done?

enter image description here

Code:

library(shiny)
library(shinyBS)

app = shinyApp(
  ui =
    fluidPage(
      sidebarLayout(
        sidebarPanel(sliderInput("bins","Number of bins:",min = 1,max = 50,value = 30)),
        mainPanel(
          plotOutput("distPlot"),
          uiOutput("uiExample"))
      )
    ),
  server =
    function(input, output, session) {
      output$distPlot <- renderPlot({
        x <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })
      output$uiExample <- renderUI({
        tagList(
          tags$span("Little circle >>"),
          tags$span(
            popify(icon("info-circle", verify_fa = FALSE),
                   "Placeholder",
                   paste(
                   "This table below presents a whole bunch of great information so strap in:",
                   "<ul>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah",
                    "Blah blah blah blah blah blah.</li>",
                   "</ul>")
            )
          )  
        )
      })
    }
)

runApp(app)

Solution

  • Add this to your UI

                tags$style(
                    '
                    .popover ul {padding: 1px; text-align: right;}
                    '
                )
    

    enter image description here