How to format text using shiny html?

451 views Asked by At

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

There are 2 answers

0
lz100 On BEST ANSWER

Add this to your UI

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

enter image description here

0
Village.Idyot On

And incorporating Iz100's answer into the complete code with my desired formatting:

library(shiny)
library(shinyBS)

app = shinyApp(
  ui =
    fluidPage(
      tags$style('.popover ul {padding: 15px; text-align: justify;}'), # << Iz100 solution here
      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)