accordions are not fillable
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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