Center accordion panel title

shiny
1

Is centering this title not possible? I tried using Inspect or the below.

library(shiny)
library(bslib)
library(htmltools)

ui <- page_fluid(
  tagQuery(accordion(id = 'id1', accordion_panel("Section A", "Some narrative for section A"), accordion_panel("Section B", "Some narrative for section B")))$find("title")$addAttrs("style" = "text-align: center;")$allTags(),
  # alternative:
  # tagAppendAttributes(accordion(id = 'id1', accordion_panel("Section A", "Some narrative for section A")), .cssSelector = ".accordion-title", style = "text-align: center;"),
  accordion(id = 'id2', accordion_panel("Section B", "Some narrative for section B"))
)

server <- function(input, output, session) {}

shinyApp(ui, server)
2

To horizontally center a block element (like <div>), use margin: auto;

However, next to the title div there is a button:

grafik
grafik945×420 33 KB

library(shiny)
library(bslib)
library(htmltools)

ui <- page_fluid(
  tagQuery(accordion(
    id = 'id1',
    accordion_panel("Section A", "Some narrative for section A"),
    accordion_panel("Section B", "Some narrative for section B")
  ))$find(".accordion-title")$addAttrs("style" = "margin: auto;")$allTags(),
  # alternative:
  # tagAppendAttributes(
  #   accordion(id = 'id1', accordion_panel("Section A", "Some narrative for section A")),
  #   .cssSelector = ".accordion-title",
  #   style = "margin: auto;"
  # ),
  accordion(id = 'id2', accordion_panel("Section C", "Some narrative for section C"))
)

server <- function(input, output, session) {}

shinyApp(ui, server)
1 Like