Question 42843 in Html Question posted in
Some basic documentation can be found here.

How to adjust indentation of bullets using HTML (Unordered List) in R Shiny environment?

I’m trying to adjust the alignment of bullets using HTML for text rendered in R Shiny modal dialogue, as shown in the image below. I’ve gone through sources like W3 Schools and haven’t found a solution yet. The example code, somewhat representative of my larger App, is posted at the bottom. Are there any solutions for this sort of bullet alignment?

enter image description here

Example code:

library(shiny)

ui <- fluidPage(fluidRow(uiOutput("header")))

server <- function(input, output, session) {
  output$header <- renderUI({
    fluidPage(
        paste("Testing modal:"),
        tags$button(
          id = "show", class = "btn action-button",
          tags$img(src = "https://images.plot.ly/language-icons/api-home/python-logo.png")
        )
    )
  })
  
  observeEvent(input$show, {
    showModal(modalDialog(
      tags$div(style="text-align:justify",
      HTML("
      <p>Studying the pig:</p>
      <ul>
      <li>Pigs eat anything</li>
      <li>Pigs are fat</li>
      </ul>
      "))
    ))
  })
}

shinyApp(ui, server)
Tags:

2

Answers


  1. 0

    Not sure it’s the best way:

          <p>Studying the pig:</p>
      <ul>
      <li style='margin-left: -25px;'>Pigs eat anything</li>
      <li style='margin-left: -25px;'>Pigs are fat</li>
      </ul>
    Login or Signup to reply.
  2. 0

    Usually the indentation is controlled by setting the padding-left property of the ul-tag (it isn’t necessary to modify each li-tag):

    library(shiny)

ui <- fluidPage(fluidRow(uiOutput("header")))

server <- function(input, output, session) {
  output$header <- renderUI({
    fluidPage(
      paste("Testing modal:"),
      tags$button(
        id = "show",
        class = "btn action-button",
        tags$img(src = "https://images.plot.ly/language-icons/api-home/python-logo.png")
      )
    )
  })
  observeEvent(input$show, {
    showModal(modalDialog(
      tags$div(style = "text-align: justify;",
               tags$p("Studying the pig:"),
               tags$ul(style = "padding-left: 15px;",
                       lapply(list("Pigs eat anything", "Pigs are fat"), tags$li)
                       )
      )
    ))
  })
}

shinyApp(ui, server)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search