Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – using HTML's details/summary in shiny

How can I restore the "arrow" style in HTML’s details/summary collapsible section?

library(shiny)
ui <- fluidPage(tags$details(tags$summary("Collapsible"), "This content is inside"))
writeLines(capture.output(ui), "~/tmp/qq.html")
shinyApp(ui = ui, server = function(input, output) {})

Comparing the raw HTML (in "qq.html") on the left with the shiny rendering on the right,

side-by-side, raw HTML on the left, shiny on the right

I can’t get the basic style= theming to work, such as

tags$summary("Collapsible", style = "list-style-type: disc;")

I know that shiny does a lot of styling in the background, but I feel like I’m missing something fairly basic here.

(In case it matters, this is on ubuntu 23.10 running firefox-122, though it’s the same in chrome-120.)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured out one way, using the special revert CSS keyword.

    tags$details(
  tags$summary("Collapsible", style = "display:revert;"),
               "This content is inside")
)

  2. 0

    The default style provided by your browser is overwritten by bootstrap (bootstrap-3.4.1/css/less/normalize.less).
    From Chromes DevTools:

    result

    Accordingly, another option is to apply the default again:

    library(shiny)

ui <- fluidPage(tags$details(tags$summary("Collapsible", style = "display: list-item;"), "This content is inside"))
writeLines(capture.output(ui), "qq.html")
shinyApp(ui = ui, server = function(input, output) {})

    In this situation there is no other way to prevent the style from being applied (apart from modifying the according dependencies).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search