accordions are not fillable

[daattali]

I was struggling to understand why a very simple page with only a card and an accordion under it ends up with a scrollbar. I think that accordions are not fillable, and I cannot figure out how to work with them correctly.

Here is a simple layout with two cards on top of each other, which correctly take up exactly the entire page height, and both cards end up with scrollbars inside them:

library(shiny)
library(bslib)

ui <- page_fillable(
  bslib::layout_columns(
    col_widths = 12,
    card(
      textInput("text1", "text", ""),
      textInput("text2", "text", ""),
      textInput("text3", "text", ""),
      textInput("text4", "text", ""),
      textInput("text5", "text", ""),
    ),
    card(
      numericInput("num1", "num", 1),
      numericInput("num2", "num", 1),
      numericInput("num3", "num", 1),
      numericInput("num4", "num", 1),
      numericInput("num5", "num", 1)
    )
  )
)

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

shinyApp(ui, server)

If I replace the bottom card with an accordion, now the accordion goes beyond the page and the page gets a scrollbar instead of the accordion having a scrollbar.

library(shiny)
library(bslib)

ui <- page_fillable(
  bslib::layout_columns(
    col_widths = 12,
    card(
      textInput("text1", "text", ""),
      textInput("text2", "text", ""),
      textInput("text3", "text", ""),
      textInput("text4", "text", ""),
      textInput("text5", "text", ""),
    ),
    accordion(
      accordion_panel(
        "foo",
        numericInput("num1", "num", 1),
        numericInput("num2", "num", 1),
        numericInput("num3", "num", 1),
        numericInput("num4", "num", 1),
        numericInput("num5", "num", 1)
      )
    )
  )
)

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

shinyApp(ui, server)

It seems that providing the height argument to the accordion() doesn't do anything. The only way I could find to remove the page scrollbar is to wrap the contents of the accordion_panel inside a div with a fixed height, but then I lose the "fill" ability of the top card.

What is the correct way to use an accordion without losing the fillable quality?

[cpsievert]

Accordions in general aren't very compatible with the idea of filling layout. If you want scrolling to be within a certain region of the app, consider doing:

bslib::layout_columns(
    col_widths = 12,
    card(
      textInput("text1", "text", "")
    ),
    card(
      accordion(
        accordion_panel("foo", numericInput("num1", "num", 1))
      )
    )
)

Or, if you don't like the border and padding:

bslib::layout_columns(
    col_widths = 12,
    card(
      textInput("text1", "text", "")
    ),
    div(bslib::as_fill_carrier(),
      accordion(
        accordion_panel("foo", numericInput("num1", "num", 1))
      )
    )
)

[daattali]

The second option doesn't actually fix the problem, at least not for me:

library(shiny)
library(bslib)

ui <- page_fillable(
  bslib::layout_columns(
    col_widths = 12,
    card(
      textInput("text1", "text", ""),
      textInput("text2", "text", ""),
      textInput("text3", "text", ""),
      textInput("text4", "text", ""),
      textInput("text5", "text", ""),
    ),
    div(
      bslib::as_fill_carrier(),
      accordion(
        accordion_panel(
          "foo",
          numericInput("num1", "num", 1),
          numericInput("num2", "num", 1),
          numericInput("num3", "num", 1),
          numericInput("num4", "num", 1),
          numericInput("num5", "num", 1)
        )
      )
    )
  )
)

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

shinyApp(ui, server)

I'm getting a scrollbar on the entire page, instead of in the accordion

[cpsievert]

Ahh right, you'd also need overflow: auto on the <div>

[daattali]

Thanks that comes close. Since the scrollbar is outside the accordion, the UI looks a little glitchy, because you don't get to see the border of the accordion until you scroll all the way down. So the bottom of the page has an "open border" which looks off.

I suppose this is the best that it can be. Thanks. You may disagree, but I thought it would make sense to mention in the documentation which common bslib components don't act as fillables.

You can close this.