rstudio / rstudio/bslib

accordions are not fillable

Open
#1,293 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
569
Forks
72
Avg merge
1d 2h
Merged PRs (30d)
5

Description

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?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the two supplied Shiny and bslib layouts and compare the card and accordion behavior inside page_fillable(). Start by tracing how accordion() handles its height and overflow relative to the surrounding layout. Done means the accordion retains the fillable layout and its contents scroll without adding a page scrollbar.

Written by the indexing model from the issue text.

Assessment

Tech stack
r, scss
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.