posit-dev / posit-dev/py-shiny
[Feature]: Pass additional parameters from `navset_card_*()` to `card()`
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 1.8k
- Forks
- 135
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 21
Description
Category
UI Components
Scope
Quality of Life
Problem
I came across a situation where I wanted a navset_card_pill inside an outer card. The navset card held several elements under each tab, meaning the inner card needed a scrollbar to view all elements. My preference in this scenario would have been to have the outer card scroll and the inner card expand to its full height. The trouble is that you can't pass additional parameters to navset_card_pill such as style, height, or fill.
My workaround was to wrap the navset_card_pill in a div to set height="auto". This was fine. It has a minor inconvenience of extra margin below the inner card, but that isn't very difficult to correct with some CSS.
Reproducible Example
Observe the scrolling behavior of the left column when the window height is small (for example on a mobile device in landscape mode). The navset card is becomes very short and is forced to scroll.
from shiny import App, ui
import lorem
app_ui = ui.page_navbar(
ui.nav_panel(
"Main",
ui.layout_columns(
ui.card(
ui.card_header("Outer Card"),
ui.p("Some UI element above"),
ui.navset_card_pill(
ui.nav_panel("Tab 1", ui.p(lorem.get_paragraph(3))),
# can't pass additional arguments through to card()
),
ui.p("Some UI element below"),
),
ui.card("Right column", ui.p(lorem.get_paragraph(3))),
col_widths=[6, 6],
),
),
title="App",
fillable=True,
)
def server(input, output, session):
pass
app = App(app_ui, server)
An example of the workaround:
from shiny import App, ui
import lorem
app_ui = ui.page_navbar(
ui.nav_panel(
"Main",
ui.layout_columns(
ui.card(
ui.card_header("Outer Card"),
ui.p("Some UI element above"),
ui.div(
ui.navset_card_pill(
ui.nav_panel("Tab 1", ui.p(lorem.get_paragraph(3))),
),
height="auto",
),
ui.p("Some UI element below"),
),
ui.card("Right column", ui.p(lorem.get_paragraph(3))),
col_widths=[6, 6],
),
),
title="App",
fillable=True,
)
def server(input, output, session):
pass
app = App(app_ui, server)
Shiny: 1.6.2
Python: 3.14.5
OS: Windows 11
Browser: tested in Firefox and Chrome
Solution
Similar to #1451, passing through other parameters to card() would be useful. That would offer more freedom for users to style the navset_card_* cards. Perhaps kwargs would be suitable here?
Alternatives (Optional)
No response
Example (Optional)
Impact (Optional)
No response
Contribution? (Optional)
Yes, I can implement (or help).
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
Locate the definitions of navset_card_*() and card() in the repository, then inspect how card parameters are currently accepted and forwarded. Use the reproducible example to verify that parameters such as style, height, and fill can reach the underlying card and that the resulting navset card has the expected scrolling behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100