rstudio / rstudio/bslib

`navs_pill_card(placement = "below")` should use dropup `nav_menu()`

Open
#545 0 comments 3 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

When nav_menu() is used in navs_pill_card() with placement = "below", the menu can sometimes be rendered as a dropdown menu that overflows the card container but isn't visible without scrolling the container.

image

We should catch this and use a dropup menu instead, which would also result in better looking menus.

Note: this seems to happen only if there isn't anything affecting the height of the card. In general, Bootstrap will detect the overflow and treat the dropdown as a dropup, but there are definitely edge cases where that detection will fail.

library(htmltools)

link_shiny <- tags$a(shiny::icon("github"), "Shiny", href = "https://github.com/rstudio/shiny", target = "_blank")
link_posit <- tags$a(shiny::icon("r-project"), "Posit", href = "https://posit.co", target = "_blank")

navs_pill_card(
  nav(title = "One", p(lorem::ipsum(2))),
  nav(title = "Two", p(lorem::ipsum(2))),
  nav_spacer(),
  nav_item(link_shiny),
  nav_menu(
    title = "Other links",
    align = "right",
    nav("Three", p("Third tab content")),
    nav_item(link_posit)
  ),
  placement = "below"
)

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 provided R example, then trace the navs_pill_card() and nav_menu() entry points to see how placement="below" is rendered. Done means the menu consistently uses Bootstrap's dropup behavior in this case and no longer overflows the card container.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.