posit-dev / posit-dev/py-shiny

[Feature]: Pass additional parameters from `navset_card_*()` to `card()`

Open
#2,260 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

ai-triage:accepted enhancement needs-triage Priority: Low
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

  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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.